解决跨域Access-Control-Allow-Origin 设置无效问题(转)
原文:https://www.aityp.com/%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9Faccess-control-allow-origin-%E8%AE%BE%E7%BD%AE%E6%97%A0%E6%95%88%E9%97%AE%E9%A2%98
在开发或使用别人项目的过程中,经常会遇到跨域访问失败的问题,解决这种问题的方法也很简单,就是在nginx或web框架中加入跨域配置。
以nginx为例,只需要在server{}中加入以下add_header参数即可
copyadd_header 'Access-Control-Allow-Origin' * always;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'PUT,GET,POST,OPTIONS';
但是某些情况下即使加入了 Access-Control-Allow-Origin’ * 浏览器还是会报错
has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values
http://xxx.com
, *’, but only one is allowed.
这种情况下,无论你把Access-Control-Allow-Origin里面的值改成*或是域名都不行,浏览器还是会报错的。
解决思路:
打开浏览器开发者工具,查看Response Headers中是否返回多个Access-Control-Allow-Origin
上图中可以看到返回了多个Access-Control-Allow-Origin,这是因为web框架中也设置了跨域返回导致的,你可以在web框架中设置关闭跨域header,也可以通过nginx删除返回的header
以php为例,nginx配置fastcgi_hide_header即可
copylocation ~ \.php {
root /data/web/;
fastcgi_pass 127.0.0.1:9006;
fastcgi_index index.php;
fastcgi_hide_header Access-Control-Allow-Origin;
include php_fcgi.conf;
}
重启nginx,浏览器再次访问就不会报跨域错误了~
copynginx -t && nginx -s reload
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
2021-12-02 史上最全 Vue 前端代码风格指南(转)