cdn（cloudfront）的nuxt字体cors问题答案

【问题标题】：nuxt fonts cors issue with cdn(cloudfront)cdn（cloudfront）的nuxt字体cors问题
【发布时间】：2018-09-23 07:30:29
【问题描述】：

我有一些 cloudfront 支持的字体，如下所示： https://xxx.cloudfront.net/_nuxt/fonts/fontawesome-webfont.b06871f.ttf

该文件可以在chrome中下载成功，与原始文件（https://example.com/_nuxt/fonts/fontawesome-webfont.b06871f.ttf）相同。

但我在 chrome 开发控制台中遇到错误，并且字体无法正常工作。

从源“http://example.com”访问位于“https://xxx.cloudfront.net/_nuxt/fonts/fontawesome-webfont.b06871f.ttf”的字体已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'http://example.com'。

这是我的云端设置

nginx 设置：

upstream my_nodejs_upstream {
    server 127.0.0.1:3000;
    keepalive 64;
}

server {
  listen 80;
  listen 443 ssl http2;
  server_name example.com *.example.com;

  if ($http_user_agent ~* (Jorgee) ) {
     return 403;
  }

#  I try to add Access-Control-Allow-Origin header here, but not working
#  location ~* \.(ttf|ttc|otf|eot|woff|svg|font.css)$ {
#    add_header Access-Control-Allow-Origin *;
#  }

  location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_max_temp_file_size 0;
    proxy_pass http://my_nodejs_upstream/;
    proxy_redirect off;
    proxy_read_timeout 240s;
  }

}

卷曲的结果

curl -I https://xxx.cloudfront.net/_nuxt/fonts/fontawesome-webfont.b06871f.ttf

HTTP/2 200
content-type: application/x-font-ttf
content-length: 165548
date: Fri, 13 Apr 2018 02:43:21 GMT
server: nginx
accept-ranges: bytes
cache-control: public, max-age=31536000
last-modified: Fri, 13 Apr 2018 01:47:18 GMT
etag: W/"286ac-162bcaf7470"
vary: Accept-Encoding
x-cache: Miss from cloudfront
via: 1.1 20ec3b4214c4cf2bbb05faf96ff61033.cloudfront.net (CloudFront)
x-amz-cf-id: I-b_DNfst4q48vJtNRrzxCX2uSNi6yO1_BFSPVuWxRP1Q5Ii6AElUQ==

curl -I https://example.com/_nuxt/fonts/fontawesome-webfont.b06871f.ttf

HTTP/2 200
date: Fri, 13 Apr 2018 02:45:28 GMT
content-type: application/x-font-ttf
content-length: 165548
server: nginx
vary: Accept-Encoding
accept-ranges: bytes
cache-control: public, max-age=31536000
last-modified: Fri, 13 Apr 2018 01:47:18 GMT
etag: W/"286ac-162bcaf7470"

谁能给我一些意见~??

【问题讨论】：

标签： nginx cors amazon-cloudfront cdn

【解决方案1】：

您需要将特定字体的 nginx 配置块嵌套在 location / 块中，如下所示：

upstream my_nodejs_upstream {
    server 127.0.0.1:3000;
    keepalive 64;
}

server {
  listen 80;
  listen 443 ssl http2;
  server_name example.com *.example.com;

  if ($http_user_agent ~* (Jorgee) ) {
    return 403;
  }

  location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_max_temp_file_size 0;
    proxy_pass http://my_nodejs_upstream/;
    proxy_redirect off;
    proxy_read_timeout 240s;

    location ~* \.(ttf|ttc|otf|eot|woff|svg|font.css)$ {
      add_header Access-Control-Allow-Origin *;
    }
  }
}

【讨论】：

我刚刚完成，重启 nginx 并通过 /* 使 cloudfront 无效，但没有任何变化..
嵌套位置块后字体会返回404 not found，但不知道为什么？

【解决方案2】：

Nginx 设置应该是

location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_max_temp_file_size 0;
    proxy_pass http://my_nodejs_upstream/;
    proxy_redirect off;
    proxy_read_timeout 240s;
    if ($request_uri ~* \.(ttf|ttc|otf|eot|woff|woff2|svg|font.css)$) {
      add_header Access-Control-Allow-Origin *;
    }
}

【讨论】：