Nginx提示CORS :No ‘Access-Control-Allow-Origin’ header 解决办法

有时候你的业务需求,可能会出现跨域的问题,我的博客也是一样的(因为我博客用的站群模式)。当你在我的博客注册的时候,Console控制台会出现如下错误:

Access to Font at 'https://www.fujieace.com/wp-content/themes/fujie/css/fonts/fontawesome-webfont.woff?v=4.4.0' from origin 'https://fujieace.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fujieace.com' is therefore not allowed access.
wp-signup.php:1 Access to Font at 'https://www.fujieace.com/wp-content/themes/fujie/css/fonts/fontawesome-webfont.ttf?v=4.4.0' from origin 'https://fujieace.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fujieace.com' is therefore not allowed access.
wp-signup.php:1 Access to Font at 'https://www.fujieace.com/wp-content/plugins/comments-like-dislike/fonts/fontawesome-webfont.woff2?v=4.6.3' from origin 'https://fujieace.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fujieace.com' is therefore not allowed access.
wp-signup.php:1 Access to Font at 'https://www.fujieace.com/wp-content/plugins/comments-like-dislike/fonts/fontawesome-webfont.woff?v=4.6.3' from origin 'https://fujieace.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fujieace.com' is therefore not allowed access.
wp-signup.php:1 Access to Font at 'https://www.fujieace.com/wp-content/plugins/comments-like-dislike/fonts/fontawesome-webfont.ttf?v=4.6.3' from origin 'https://fujieace.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fujieace.com' is therefore not allowed access.

上面报错大致意思如下:

从原产地'https://fujieace.com'访问'https://www.fujieace.com/wp-content/themes/fujie/css/fonts/fontawesome-webfont.woff?v=4.4.0'中的字体 已被CORS策略阻止:请求的资源上没有“Access-Control-Allow-Origin”标头。 因此,不允许来源“https://fujieace.com”访问。

nginx中Access-Control-Allow-Origin字体跨域

 

解决办法

由于我博客被CORS策略阻止的只有字体,因此我只需要nginx配置字体跨域就行了。就不用配置其它跨域了。毕竟:Access-Control-Allow-Origin * 跨域是很危险的。

 

注意:nginx.conf配置好了,一定要重启nginx。

 

nginx中Access-Control-Allow-Origin字体跨域配置

方法:

location ~* \.(eot|ttf|woff|woff2|svg)$ {
    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.conf这样就可以实现GET,POST,OPTIONS的跨域请求的支持,也可以 add_header Access-Control-Allow-Origin --指定允许的url;

 

nginx中Access-Control-Allow-Origin 其它跨域配置

示例:

#
# 用于nginx的开放式CORS配置
#
location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # 自定义标题和标题各种浏览器*应该*可以,但不是
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # 告诉客户这个飞行前信息有效期为20天
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
}
    A+
发布日期:2018年07月11日 11:49:10  所属分类:Nginx
最后更新时间:2019-04-16 11:05:33
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 9.9元
  • 市场价:49.9元
SEO顾问服务 中小型网站 单站/最低99.9元 全方位优化
SEO顾问服务 中小型网站 单站/最低99.9元 全方位优化
  • ¥ 99.9元
  • 市场价:5000元
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
  • ¥ 6.8元
  • 市场价:8.8元
wp discux 帝国 dedecms phpcms等快速建站
wp discux 帝国 dedecms phpcms等快速建站
  • ¥ 99.9元
  • 市场价:499.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

  1. 头像 夏诗美 0

    很不错的文章!我路过,支持一下!