花瓣小跑 发表于 2024-12-7 23:40:21

Django办理Axios跨域问题(AxiosError {message ‘Network Error...)

Django办理Axios跨域问题(AxiosError {message: ‘Network Error…)



Django中担当axios哀求时会遇到的AxiosError: Network Error问题,这是由于当你用axios发送一个哀求到不同网站上(好比域名不同、端口不同),浏览器会认为这是不安全的操作,会拒绝这个哀求
Django中会有专门的中间件办理这个跨域问题,先直接上代码
【1】安装

pip install django-cors-headers
【2】进入setting.py

1.注册app

INSTALLED_APPS = [
    '....其他app'
    'corsheaders',
]
2.注册中间件

MIDDLEWARE = [
    '....其他中间件'
    'corsheaders.middleware.CorsMiddleware',
]
3.新增配置文件

# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True
# 允许的请求头
CORS_ALLOW_HEADERS = (
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",

    # 额外允许的请求头
    'token',
)
原理

浏览器有一个名为同源策略(Same origin policy)的约定,它是浏览器最焦点也最基本的安全功能
该策略限制哀求的url中必须与浏览器上的url所在处于同域上,即域名(www.xxx.com)、端口(8080)、协议(http、https)雷同,否则浏览器会报cors错误
CORS

CORS分为简朴哀求和非简朴哀求


[*]简朴哀求:只哀求一次,如果服务器处理了cors则正常返回,否则报错
[*]非简朴哀求:先发送一次options哀求,如果服务器处理了cors则再发送真正的哀求,如果服务端没有处理则不会再发送
符合下面两个条件的就是简朴哀求


[*]哀求方式时以下三种之一

[*]HEAD
[*]GET
[*]POST

[*]HTTP的头信息不超出以下几种字段

[*]Accept
[*]Accept-Language
[*]Content-Language
[*]Last-Event-ID
[*]Content-Type

而django-cors-headers则会帮我们自动处理简朴哀求和非简朴哀求,因此不需要我们再手动添加字段,除非有额外答应的哀求头参数

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: Django办理Axios跨域问题(AxiosError {message ‘Network Error...)