cdn(cloudfront)的nuxt字体cors问题
nuxt fonts cors issue with cdn(cloudfront)
我有 cloudfront 支持的一些字体,如下所示:
https://xxx.cloudfront.net/_nuxt/fonts/fontawesome-webfont.b06871f.ttf
文件可以在 chrome 中下载成功,与原始文件 (https://example.com/_nuxt/fonts/fontawesome-webfont.b06871f.ttf) 相同。
但我在 chrome 开发控制台中遇到错误,并且字体无法正常工作。
Access to Font at 'https://xxx.cloudfront.net/_nuxt/fonts/fontawesome-webfont.b06871f.ttf' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access.
这是我的云端设置
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 配置块嵌套在 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 设置应该是
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 *;
}
}
我有 cloudfront 支持的一些字体,如下所示: https://xxx.cloudfront.net/_nuxt/fonts/fontawesome-webfont.b06871f.ttf
文件可以在 chrome 中下载成功,与原始文件 (https://example.com/_nuxt/fonts/fontawesome-webfont.b06871f.ttf) 相同。
但我在 chrome 开发控制台中遇到错误,并且字体无法正常工作。
Access to Font at 'https://xxx.cloudfront.net/_nuxt/fonts/fontawesome-webfont.b06871f.ttf' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access.
这是我的云端设置
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 配置块嵌套在 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 设置应该是
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 *;
}
}