最近由于站长的一位客户网站业务需求,网站需要部署多语言插件,而这个多语言插件使用了子域名的方式,在调用字体文件时出现了跨域的问题。另一方面,之前有站长的部分用户使用一款国内作者开发的 niRvana 主题时,因为使用 OSS 的对象存储而导致部分 JS 文件调用时,同样出现了类似: CORS :No 『Access-Control-Allow-Origin』 header
这样的跨域问题。所以,今天我们就来说说,如何来解决这个问题。
其实我们在使用跨域调用资源时,出现: CORS :No 『Access-Control-Allow-Origin』 header
这样的问题,其意思就是:已被 CORS 策略阻止,请求的资源上没有 Access-Control-Allow-Origin
标头。 这就导致我们的站点中调用的其他域名资源无法正常调用和显示。
解决办法
由于 Access-Control-Allow-Origin *
跨域是及其危险的,因此我们在选择书写跨域调用的规则时,需要对特定文件类型进行约束。比如:字体文件需要跨域,我们就只需配置字体文件跨域即可。
Apache 中 Access-Control-Allow-Origin 字体跨域配置
我们需要在 .htaccess 文件中,加入如下代码:
<FilesMatch "\.(ttf|ttc|otf|eot|svg|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
这样就可以实现在 Apache 环境下字体文件的跨域请求支持,也可以 Header set Access-Control-Allow-Origin --指定允许的 url;
。
Nginx 中 Access-Control-Allow-Origin 字体跨域配置
我们需要配置 nginx.conf 文件,加入如下代码:
location ~* \.(ttf|ttc|otf|eot|svg|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
这样就可以实现在 Nginx 环境下 GET,POST,OPTIONS 的跨域请求支持,同样也可以 add_header Access-Control-Allow-Origin --指定允许的 url;
。
注意:如果想要支持跨域调用 JS 文件,就需要将 JS 的文件类型加入允许的文件类型中;修改完网页服务器配置文件后,要记得重启网页服务器服务。