宝塔面板+Nginx配置CORS跨域访问:解决‘Access-Control-Allow-Origin‘问题(适配百度云CDN)

Discuz论坛出现“NO Access-Control-Allow-Origin header”错误,通过百度、bing检索了大半天,整理了以下配置跨域请求头的方法,下面还原现场,希望可以帮遇到这种情况的朋友少走弯路。

原文地址:

var code = "d22ad826-f95d-4002-8f02-39d8aead3f72"

宝塔面板配置Nginx跨域访问CORS请求:"Access-Control-Allow-Origin"头的正确方法(百度云CDN适用) - 知识库 - 0oD三一o0博客通过配置Nginx的跨域请求头“Access-Control-Allow-Origin”和CDN的跨域访问设置,解决了Discuz论坛因缺少该请求头导致的字体文件跨域请求错误问题。...https://www.o0310o.com/kb/552.html

浏览器报错内容:

CORS

Access to font at 'https://cdn.reo.ink/web/www.31dnf.com/template/xmyc_lt4/static/js/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0' from origin 'https://www.31dnf.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED

字体文件引用的另一个CDN域名,由于跨域请求问题无法正常显示字体,下面以宝塔面板Nginx环境为例,说明下正确配置Nginx跨域请求:“Access-Control-Allow-Origin”头的步骤:

宝塔面板跨域访问CORS配置方法

首先进入网站设置界面

宝塔面板首页点击“网站”然后在需要修改的网站右侧点击“设置”选项进入配置页面后,下拉选择左侧的“其它设置”;

跨域访问CORS配置

在“跨域访问CORS配置”中,将状态打开,来源(Origins)填入你需要引用的外部资源域名,请求方法一般选择“GET/POST/OPTIONS”,请求头与响应头除了自定义全选,然后缓存时间按需配置后保存即可。

然后查看配置文件

在保存之后点击该网站“配置文件”进行查看,是否成功生成相关配置代码,如果没有生成可以复制我这里的代码。(生成失败或许跟宝塔面板有关)

配置生成CORS-START

代码自取:

#CORS-START
            add_header 'Access-Control-Allow-Origin' 'reo.ink'; //此处域名自行修改为自己的
            add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization,X-Requested-With,Range,Accept,Cache-Control,If-Modified-Since';
            add_header 'Access-Control-Max-Age' '60';
            add_header 'Access-Control-Expose-Headers' 'X-Custom-Header,Content-Length,ETag,Cache-Control,Last-Modified,Expires,Vary';
            if ($request_method 'OPTIONS') {
                return 204;
            }
#CORS-END

最后重启Nginx

再以上步骤都操作完之后就可以重启Nginx更新网站配置

重启Nginx以更新配置

CDN跨域访问配置

一般来说按照以上步骤,只要配置得当,就能完美解决CORS跨域的问题,但是我是用的百度CDN加速服务,所以有用到CDN服务的站长朋友,可以参考以下方案,只需在被请求域名CDN中进行配置,无需在请求网站中配置。

第一步:在百度云控制台“内容分发网络 CDN”左侧找到“域名管理”菜单,点击“访问控制”栏目,下拉找到“CDN跨域访问配置”,点击右侧的编辑,即可进行配置操作。

访问控制

百度云内容分发网络CDN配置

第二步:跨域访问配置,开启CORS规则,并在Origins框中填入你的请求网站域名,保存即可完成配置。

跨域访问域名配置

(支持HTML5标准的跨域访问解决方案, Origins数量不可超过100个,每个Origin字符数不可超过150。)

配置完成后,按“Ctrl+F5”强制刷新页面就能正常实现跨域请求了。

posted @   BLOGAME  阅读(40)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示