当前位置:首页 > 技术分享 > 正文内容

Nginx 配置服务器完美解决跨域问题 has been blocked by CORS policy 指定多个域名白名单跨域

admin12个月前 (10-09)技术分享1149

前台在访问不同ip的nginx服务器时报:No ‘Access-Control-Allow-Origin’ header is present on the requested resource 原因:被请求的资源没有设置 ‘Access-Control-Allow-Origin’,也就是nginx的返回信息头没有Access-Control-Allow-Origin。


跨域请求错误

  • 在网页前端请求访问图床文件时报错:



  • 错误信息

Access to fetch at 'https://101.43.39.125/HexoFiles/win11-mt/20210814144827.pdf' from origin 'https://www.zywvvd.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.




问题原因

  • 被请求的资源没有设置 ‘Access-Control-Allow-Origin’,也就是nginx的返回信息头没有Access-Control-Allow-Origin

解决方案

  • 在 nginx 配置文件中的路由中添加以下代码:

location / {  
    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,Authorization';
 
    if ($request_method = 'OPTIONS') {
        return 204;
    }}
  • 如果你请求的不是"location /" ,则在自己的路由添加例如:“localhost /test”

Access-Control-Allow-Origin

  • 服务器默认是不被允许跨域的。给Nginx服务器配置Access-Control-Allow-Origin '*'后,表示服务器可以接受所有的请求源(Origin),即接受所有跨域的请求。

 指定多个域名跨域请求配置

上述配置做法,虽然做到了去除跨域请求控制,但是由于对任何请求来源都不做控制,看起来并不安全,所以不建议使用

指定一个域名白名单跨域请求配置(具有局限性)

add_header Access-Control-Allow-Origin http://127.0.0.1;


通过设置变量值解决指定多个域名白名单跨域请求配置(建议使用)

	set $cors_origin "";
        if ($http_origin ~* "^http://127.0.0.1$") {
                set $cors_origin $http_origin;
        }
        if ($http_origin ~* "^http://localhost$") {
                set $cors_origin $http_origin;
        }
        add_header Access-Control-Allow-Origin $cors_origin;


Access-Control-Allow-Headers

  • 是为了防止出现以下错误:

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
  • 这个错误表示当前请求Content-Type的值不被支持。其实是我们发起了"application/json"的类型请求导致的。这里涉及到一个概念:预检请求(preflight request),请看下面"预检请求"的介绍。

Access-Control-Allow-Methods

  • 是为了防止出现以下错误:

Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

给OPTIONS 添加 204的返回

  • 是为了处理在发送POST请求时Nginx依然拒绝访问的错误

  • 发送"预检请求"时,需要用到方法 OPTIONS ,所以服务器需要允许该方法。

参考资料

  • https://blog.csdn.net/xuezhangjun0121/article/details/118710426

  • https://blog.csdn.net/qwe885167759/article/details/121030133

扫描二维码推送至手机访问。

版权声明:本文由小刚刚技术博客发布,如需转载请注明出处。

本文链接:https://blog.bitefu.net/post/434.html

分享给朋友:

相关文章

Chrome 开启自带多线程下载支持 提升下载速度

Chrome 开启自带多线程下载支持 提升下载速度

Chrome 是当前性能最高的浏览器之一,但在下载速度方面,Chrome 可一点都不快。当前 Chrome 的下载仍是单线程机制,速度非常慢。对此,大家不得不使用第三方的下载工具,例如迅雷、IDM 等支持多线程下载的下载软件,来提高下载速度...

WPS表格办公—取消科学计数法显示

WPS表格办公—取消科学计数法显示

我们在利用WPS表格与Excel表格进行日常办公时,经常需要制作各种各样的表格,当我们在表格当中输入长数据的时候,表格经常会自动显示为科学计数法,很多人都看不懂科学计数法的意思,那么,我们如何在输入长数字的时候避免显示为科学计数法呢,今天我...

[教程] WTG备份新方法——FFU镜像格式

[教程] WTG备份新方法——FFU镜像格式

FFU(Full Flash Update) 格式是一种基于扇区的磁盘镜像文件格式,默认使用快速哈夫曼压缩(Xpress-Huffman)算法压缩,在捕获和部署时会生成哈希表进行校验,并可以使用DISM修改捕获的镜像。FFU格式很适合WTG...

超高性比的斐讯盒子T1,刷第三方YYF固件机教程超级详细版

超高性比的斐讯盒子T1,刷第三方YYF固件机教程超级详细版

家里面买了斐讯盒子T1,必不可少的就是刷机,刷机一直爽,一直刷机一直爽,这样的快乐一般人体会不到。原来斐讯盒子N1,T1,还有斐讯K2P路由器也变成了性价比超高的东东,而且众多大神也带来了超多可玩性非常高的固件和破解。楼主今天扒到了相关超高...

微软Windows 10升级密钥(例如家庭版升级为企业版) 不能用于激活系统

微软Windows 10升级密钥(例如家庭版升级为企业版) 不能用于激活系统

下面的密钥,是微软官方提供的,仅能用于Windows10系统版本的升级,比如从家庭版升级为专业版、专业版升级为企业版等。升级密钥不能用于激活系统,激活需要KMS或者数字权利,由于涉及到版权问题,在此不宜分享,请大家自行查找激活相关的内容。准...

Nginx服务崩溃自动重启脚本(监控进程服务并自动重启进程服务)脚本

有一台服务器运行着Ngin最近突然有一次崩溃,导致使用方当天无法访问网页端,然后我不得不登录服务器,检查各项服务,发现nginx崩溃了,于是重启Nginx,问题解决。后来为了防止Nginx再发生这种情况给运维带来的运维成本,于是写了一个脚本...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。