Discuz论坛出现“NO Access-Control-Allow-Origin header”错误,通过百度、bing检索了大半天,整理了以下配置跨域请求头的方法,下面还原现场,希望可以帮遇到这种情况的朋友少走弯路。
浏览器报错内容:
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配置”中,将状态打开,来源(Origins)填入你需要引用的外部资源域名,请求方法一般选择“GET/POST/OPTIONS”,请求头与响应头除了自定义全选,然后缓存时间按需配置后保存即可。
然后查看配置文件
在保存之后点击该网站“配置文件”进行查看,是否成功生成相关配置代码,如果没有生成可以复制我这里的代码。(生成失败或许跟宝塔面板有关)
代码自取:
#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更新网站配置
CDN跨域访问配置
一般来说按照以上步骤,只要配置得当,就能完美解决CORS跨域的问题,但是我是用的百度CDN加速服务,所以有用到CDN服务的站长朋友,可以参考以下方案,只需在被请求域名CDN中进行配置,无需在请求网站中配置。
第一步:在百度云控制台“内容分发网络 CDN”左侧找到“域名管理”菜单,点击“访问控制”栏目,下拉找到“CDN跨域访问配置”,点击右侧的编辑,即可进行配置操作。
第二步:跨域访问配置,开启CORS规则,并在Origins框中填入你的请求网站域名,保存即可完成配置。
(支持HTML5标准的跨域访问解决方案, Origins数量不可超过100个,每个Origin字符数不可超过150。)
配置完成后,按“Ctrl+F5”强制刷新页面就能正常实现跨域请求了。
还没有评论,来说两句吧...