如何在NGINX中添加Access-Control-Allow-Origin?

如何设置Access-Control-Allow-Origin标题,以便我可以在我的主域名上使用我的子域中的Web字体?


笔记:

您将在HTML5BP服务器configuration项目https://github.com/h5bp/server-configs中find针对大多数HTTP服务器的此标头和其他标头的示例

Nginx必须用http://wiki.nginx.org/NginxHttpHeadersModule进行编译(在Ubuntu和其他一些Linux发行版上是默认的)。 那么你可以做到这一点

location ~* \.(eot|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; } 

更新的答案:

 # # 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/

configuration其他networking服务器http://enable-cors.org/server.html

这里是我写的文章,它避免了GET | POST的一些重复。 它应该让你在Nginx中使用CORS。

nginx访问控制允许来源

以下是post的示例代码片段:

 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 .... } } 

首先,让我说@hellvinz答案正在为我工​​作:

 location ~* \.(eot|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; } 

不过,我决定用一个单独的答案来回答这个问题,因为我只花了十多个小时寻找一个解决scheme后才设法使这个解决scheme工作。

看来Nginx默认没有定义任何(正确的)字体MIMEtypes。 按照这个tuorial我发现我可以添加以下内容:

 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文件。 如上所述,上述解决scheme然后工作。