网站 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 的文件类型加入允许的文件类型中;修改完网页服务器配置文件后,要记得重启网页服务器服务。

未经允许不得转载:赢聚网 » 网站 JS 文件跨域的解决办法
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • (邮箱) (必填)
  • (网址)

觉得文章有用就打赏一下文章作者

微信扫一扫打赏