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

 5 年前     1.1K  

文章目录

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

版权声明:铭创网络 发表于 5 年前,共 1129 字。
转载请注明:网站 JS 文件跨域的解决办法 | 赢聚网

您可能感兴趣的

暂无评论

暂无评论...