您现在的位置是:首页 > 技术教程 正文

前后端分离常见跨域问题及解决方法

admin 阅读: 2024-03-23
后台-插件-广告管理-内容页头部广告(手机)

1、has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

原因:跨域的allow_headers没有设置authorization

"allow_headers": ["Referer", "Accept", "Origin", "User-Agent"]
  • 1

解决方法,加个Authorization就可以

"allow_headers": ["Referer", "Accept", "Origin", "User-Agent", "Authorization"]
  • 1

2、has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Credentials’ header in the response is ‘’ which must be ‘true’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

原因:Access-Control-Allow-Credentials设置为True, Control-Allow-Origin就不能为"*"。

解决方法
(1)前端配置withCredentials=true, 后端把Origin设置为指定源,同时加上Credentials=true

http { server { listen 80; server_name localhost; 修改为 add_header 'Access-Control-Allow-Origin' 'host:port'; add_header "Access-Control-Allow-Credentials" "true"; # 新增这一个 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

(2) 前端配置withCredentials=false, 后端把Origin不修改

3、出现多个origin, has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://192.168.3.46:9528, *’, but only one is allowed.

原因:可能是出现重复配置跨域导致。我出现这个原因因为nginx和flask两个都配置了跨域请求,导致一个出现这种情况
下面是我配置信息:

# falsk配置信息 cors = CORS(resources={ r"*": { "origins": "*", "methods": ["PUT", "GET", "POST", "DELETE", "OPTIONS"], "allow_headers": ["Referer", "Accept", "Origin", "User-Agent", "Token"], } })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
# nginx配置信息 http { server { listen 80; server_name localhost; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; location / { proxy_pass http://flask_app:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

解决方法:两个保留其中一个就可以

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索