网站 JS 文件跨域的解决办法

最近由于站长的一位客户网站业务需求，网站需要部署多语言插件，而这个多语言插件使用了子域名的方式，在调用字体文件时出现了跨域的问题。另一方面，之前有站长的部分用户使用一款国内作者开发的 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 的文件类型加入允许的文件类型中；修改完网页服务器配置文件后，要记得重启网页服务器服务。