如何设置 Access-Control-Allow-Origin 标头,以便可以在主域上使用来自子域的 Web 字体?
笔记:
您可以在 HTML5BP 服务器配置项目中找到适用于大多数 HTTP 服务器的此标头和其他标头的示例https://github.com/h5bp/server-configs
答案1
Nginx 必须使用以下工具进行编译http://wiki.nginx.org/NginxHttpHeadersModule(Ubuntu 和其他一些 Linux 发行版的默认设置)。然后你可以这样做
location ~* \.(eot|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
}
答案2
通配符 cors
更新的答案:
#
# Wide-open CORS config for nginx
#
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
#
# Om nom nom cookies
#
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
#
# Tell client that this pre-flight info is valid for 20 days
#
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-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
}
来源:https://michielkalkman.com/snippets/nginx-cors-open-configuration.html
您可能还希望添加Access-Control-Expose-Headers
(与 Access-Control-Allow-Headers 相同的格式),以便向 ajax 请求公开您的自定义和/或“非简单”标头。
Access-Control-Expose-Headers (optional) - The XMLHttpRequest 2 object has a
getResponseHeader() method that returns the value of a particular response
header. During a CORS request, the getResponseHeader() method can only access
simple response headers. Simple response headers are defined as follows:
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
If you want clients to be able to access other headers, you have to use the
Access-Control-Expose-Headers header. The value of this header is a comma-
delimited list of response headers you want to expose to the client.
-http://www.html5rocks.com/en/tutorials/cors/
其他 Web 服务器的配置http://enable-cors.org/server.html
访问控制允许凭证
如果您在 CORS 请求中使用 Access-Control-Allow-Credentials,则需要您所在位置的 cors 标头接线与此类似。由于源必须与客户端域匹配,因此通配符不起作用。
if ($http_origin = ''){
set $http_origin "*";
}
proxy_hide_header Access-Control-Allow-Origin;
add_header Access-Control-Allow-Origin $http_origin;
答案3
这是我写的文章,它避免了 GET|POST 的一些重复。它应该可以帮助您在 Nginx 中使用 CORS。
以下是该帖子的示例片段:
server {
listen 80;
server_name api.test.com;
location / {
# Simple requests
if ($request_method ~* "(GET|POST)") {
add_header "Access-Control-Allow-Origin" *;
}
# Preflighted requests
if ($request_method = OPTIONS ) {
add_header "Access-Control-Allow-Origin" *;
add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
return 200;
}
....
# Handle request
....
}
}
答案4
首先,我要说的是@hellvinz 的回答对我有用:
location ~* \.(eot|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
}
但是,我决定用单独的答案来回答这个问题,因为我花了大约十个小时寻找解决方案后才设法使这个解决方案发挥作用。
看来 Nginx 默认没有定义任何(正确的)字体 MIME 类型。通过以下方式本教程我发现我可以添加以下内容:
application/x-font-ttf ttc ttf;
application/x-font-otf otf;
application/font-woff woff;
application/font-woff2 woff2;
application/vnd.ms-fontobject eot;
到我的etc/nginx/mime.types
文件。如上所述,上述解决方案有效。