Django后端解决与前端vue的跨域问题

最新推荐文章于 2024-09-15 23:15:37 发布

飞翔哥，求助

最新推荐文章于 2024-09-15 23:15:37 发布

阅读量1.4k

点赞数

文章标签： django vue.js

本文链接：https://blog.youkuaiyun.com/m0_50793579/article/details/134282190

版权

本文介绍了如何在Django后端使用corsheaders解决跨域问题，包括安装、配置、csrf_exempt装饰器的应用以及CORS设置，同时提到了可能的安全风险和优化建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域问题可以从前端vue解决，也可以从Django后端解决，这里只探讨Django后端解决跨域问题。

1.首先安装django-cors-headers

pip install django-cors-headers

2.在setting.py中加入corsheaders

在这里插入图片描述
在INSTALLED_APPS中加入corheaders

在第三行加入

'corsheaders.middleware.CorsMiddleware'

一定要注意顺序！！！
第四行的

# "django.middleware.csrf.CsrfViewMiddleware",

会对前端vue向后端传输文件产生影响。
Django端会有以下问题：

Forbidden (Origin checking failed - http://localhost:8080 does not match any trusted origins.): /diffraction/upload/
[08/Nov/2023 09:48:03] "POST /diffraction/upload/ HTTP/1.1" 403 2564

vue端会有

403 Forbidden

通过询问文心一言得到了答案：

这个错误通常发生在试图进行跨域请求时，由于浏览器的同源策略，如果请求的源和目标源不匹配，就会收到这种错误信息。
在Django中，你可以在你的视图函数中使用@csrf_exempt装饰器来避免这个问题。这个装饰器可以避免跨站请求伪造（CSRF）攻击，但在实际的开发过程中，使用这个装饰器可能会带来一些安全问题，因为它会禁用CSRF保护。
如果你确定你的请求是安全的，你可以在你的视图函数中添加这个装饰器，例如：

from django.views.decorators.csrf import csrf_exempt  
  
@csrf_exempt  
def my_view(request):  
    # your view code here

但是，请确保你充分理解这个装饰器的作用和可能的安全风险。如果可能，更好的解决方案可能是修改你的请求头，使它包含正确的Origin和Access-Control-Request-Method字段，或者在服务器端设置适当的CORS策略。

通过CSRF就可得知是setting.py中MiddleWare搞的鬼。
在这里插入图片描述
将其注释掉，就能够使前后端正常传输文件。
可能不是一个好办法，但是对初学者来说可能管用。

3.添加跨域设置

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_HEADERS = ("*")

以上是运行所有前端跨域请求，可根据自身情况修改。
跨域设置最好放在最后。