Я использую Django с графеном для внутреннего интерфейса и Nuxt для внешнего интерфейса. Проблема появляется, когда я пытаюсь отправить запросы от nuxt до django. В почтальоне все прекрасно работает, в nuxt я получаю ошибку 403.
Django
# url.py
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', GraphQLView.as_view(graphiql=settings.DEBUG,
schema=schema)),
]
# settings.py
CORS_ORIGIN_WHITELIST = 'http://localhost:3000'
CORS_ALLOW_CREDENTIALS = True
CSRF_USE_SESIONS = False
CSRF_COOKIE_HTTPONLY = False
CSRF_COOKIE_SAMESITE = None
Nuxt Js
# nuxt.config.js
axios: {
baseURL: 'http://127.0.0.1:8000/',
debug: false,
progress: true,
credentials: true
},
# plugins/axios.js
await $axios.onRequest((config) => {
config.headers.common['Content-Type'] = 'application/json'
config.xsrfCookieName = 'csrftoken'
config.xsrfHeaderName = 'X-CSRFToken'
const csrfCookie = app.$cookies.get('csrftoken')
config.headers.common['X-CSRFToken'] = csrfCookie
console.log(config)
# store/contact.js
import { AddMessage } from '../queries/contact.js'
export const actions = {
async send() {
const message = await this.$axios({
url: 'api/',
method: 'POST',
data: AddMessage
})
}
}
# queries/contact.js
export const AddMessage = {
query: `
mutation AddContact($input: AddMessageInput!){
addMessage(input: $input){
message{
name
email
body
terms
}
}
}
`,
variables: `
{
"input":{
"name": "test",
"email": "test@test.com",
"body": "test",
"terms": true,
}
}
`,
operationName: 'AddMessage'
}
Что-то, что
Здесь - это заголовки запроса от поста ax ios. Что-то странное для меня - повар ie с неправильным значением. Хорошее значение токена присутствует в заголовке X-CSRFToken.
Здесь - это журнал от пост-запроса ax ios. Еще одна странная вещь для меня - неопределенные заголовки: Content-Type и X-CSRFToken
Спасибо!