宝塔面板配置Nginx跨域访问CORS请求:"Access-Control-Allow-Origin"头的正确方法(百度云CDN适用)

0oD三一o0

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

浏览器报错内容:

宝塔面板配置Nginx跨域访问CORS请求:"Access-Control-Allow-Origin"头的正确方法(百度云CDN适用)

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配置方法

首先进入网站设置界面

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

宝塔面板配置Nginx跨域访问CORS请求:"Access-Control-Allow-Origin"头的正确方法(百度云CDN适用)

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

然后查看配置文件

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

宝塔面板配置Nginx跨域访问CORS请求:"Access-Control-Allow-Origin"头的正确方法(百度云CDN适用)

代码自取:

#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跨域访问CORS请求:"Access-Control-Allow-Origin"头的正确方法(百度云CDN适用)

CDN跨域访问配置

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


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

宝塔面板配置Nginx跨域访问CORS请求:"Access-Control-Allow-Origin"头的正确方法(百度云CDN适用)


宝塔面板配置Nginx跨域访问CORS请求:"Access-Control-Allow-Origin"头的正确方法(百度云CDN适用)


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

宝塔面板配置Nginx跨域访问CORS请求:"Access-Control-Allow-Origin"头的正确方法(百度云CDN适用)

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

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

文章版权声明:除非注明,否则均为0oD三一o0原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,77人围观)

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码