宝塔反向代理Access-Control-Allow-Origin缓存错误的CORS响应问题解决方案

2023-12-26

宝塔反向代理Access-Control-Allow-Origin缓存错误的CORS响应问题解决方案

利用宝塔反向代理打造专属文件服务器,可以整合多个网站的静态内容到同个域名下进行CDN加速,但是实际应用的时候发现例如Font Awesome等图标文件并不能正确显示,并会报错如下:

Access to …… has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

其实,这个“Access-Control-Allow-Origin”就是典型的跨域访问问题,Nginx缓存了错误的CORS响应,解决办法也很简单,只需要进入宝塔面板后台 >> 点击左侧导航菜单“网站”>> 在网站列表中找到“from origin”对应的网站并点击“设置”>> 点击“配置文件”,并在“server_name XXX”下方添加以下代码并点击【保存】按钮。

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET,POST';
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';

然后点击左侧导航菜单“软件商店”>> 点击应用分类【运行环境】,找到nginx并点击操作下的“设置”>> 在“服务”中点击【重启】按钮即可解决这个问题。