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

0oD三一o0

已于 2025-02-22 18:40:32 修改

阅读量397

点赞数

分类专栏： BLOG 文章标签： nginx CORS请求 Origin cdn discuz

于 2025-02-22 18:09:31 首次发布

原文链接：https://www.o0310o.com/kb/552.html

版权

BLOG 专栏收录该内容

4 篇文章

订阅专栏

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

原文地址：

宝塔面板配置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