django - Django CSRF 和 axios 发布 403 Forbidden
问题描述
我将 Django 与石墨烯用于后端,将 Nuxt 用于前端。当我尝试从 nuxt 向 django 发布请求时出现问题。在邮递员中一切正常,在 nuxt 我收到 403 错误。
姜戈
# 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
NuxtJs
# 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'
}
有点像
这是来自 axios 帖子的请求标头。对我来说奇怪的是值错误的 cookie。X-CSRFToken 标头中存在令牌的良好价值。
这是来自 axios 发布请求的日志。对我来说另一个奇怪的事情是未定义的标头:Content-Type 和 X-CSRFToken
谢谢!
解决方案
我解决了这个问题,我想在这里分享解决方案。
错误 cookie 值的问题是由管理(我不记得如何)从后端应用程序获取 csrf cookie 的前端应用程序产生的。在X-CSRFToken标头中是从响应的Set-cookie标头接收的令牌,在Cookie标头中是来自后端应用程序的 cookie。
在我用127.0.0.1更改localhost并添加
到 axios 插件后,我能够分离应用程序,独立保存和使用 cookie。config.xsrfCookieName = 'csrftoken'
第二个问题,带有未定义的标头是由 axios 生成的。这两行代码解决了这个问题。这些也在 axios onRequest 方法中添加。
config.xsrfHeaderName = 'X-CSRFToken'
config.headers['Content-Type'] = 'application/json'
推荐阅读
- javascript - Angular ag-grid 将 Master/Detail 与 Row Pinning 相结合
- javascript - 如何计算 32 位数字在分块为字节时将占用的字节数
- angular - Rxjs switchMap + toArray
- gitlab - 与master相比,如何根据更改的文件来防止作业运行?
- c - 抛出未处理的异常:写访问冲突
- python - 如何过滤多年数据框以保留所有年份值的行
- ruby - 试图防止在 Sinatra 应用程序中创建重复的用户名
- javascript - Javascript:如何从 url 下载 csv 文件
- python - 2d 数组和长 1d 数组的 Numpy 乘积,结果应该是 3d 数组
- google-maps - Flutter Google Maps,如何检测用户而不是控制器的地图区域变化