Nginx

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

  • February 4, 2022

如何設置 Access-Control-Allow-Origin 標頭,以便可以在主域上使用子域中的 Web 字型?


筆記:

您將在 HTML5BP 伺服器配置項目https://github.com/h5bp/server-configs中找到大多數 HTTP 伺服器的此標頭和其他標頭的範例

Nginx 必須使用http://wiki.nginx.org/NginxHttpHeadersModule編譯(預設在 Ubuntu 和其他一些 Linux 發行版上)。然後你可以這樣做

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

萬用字元 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;

引用自:https://serverfault.com/questions/162429