web-dev-qa-db-ja.com

NGINXにAccess-Control-Allow-Originを追加するにはどうすればよいですか？

メインドメインでサブドメインのWebフォントを使用できるように、Access-Control-Allow-Originヘッダーを設定するにはどうすればよいですか？

ノート：

HTML5BP Server Configsプロジェクト https://github.com/h5bp/server-configs に、ほとんどのHTTPサーバーのこのヘッダーとその他のヘッダーの例があります。

nginxcors
165
Chris McKee

Nginxは http://wiki.nginx.org/NginxHttpHeadersModule でコンパイルする必要があります（Ubuntuおよびその他の一部のLinuxディストリビューションのデフォルト）。その後、これを行うことができます

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

より最新の答え：

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

カスタムヘッダーや「単純でない」ヘッダーをajaxリクエストに公開するために、Access-Control-Expose-Headers（Access-Control-Allow-Headersと同じ形式）を追加することもできます。

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

39
Chris McKee

これは、GET | POSTの重複を避けるために書いた記事です。 NginxでCORSを使用できるようになります。

nginxアクセス制御許可Origin

これが投稿のサンプルスニペットです。

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

まず、@ hellvinzの答えが私にとってはうまくいっていると私に言いましょう：

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

ただし、ソリューションを探すためにさらに約10時間を費やして初めてこのソリューションを機能させることができたため、この質問には別の回答で回答することにしました。

Nginxはデフォルトで（正しい）フォントMIMEタイプを定義していないようです。 this 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ファイル。述べたように、上記のソリューションはその後機能しました。

7
DazBaldwin

Nginxの従来のadd_headerディレクティブは4xx応答では機能しません。カスタムヘッダーを追加する必要があるため、4x応答でも機能するmore_set_headersディレクティブを使用できるように、ngx_headers_moreモジュールをインストールする必要があります。

Sudo apt-get install nginx-extras

次に、nginx.confファイルでmore_set_headersを使用します。以下のサンプルを貼り付けました

server {
    listen 80;
    server_name example-site.com;
    root "/home/vagrant/projects/example-site/public";

    index index.html index.htm index.php;

    charset utf-8;

    more_set_headers 'Access-Control-Allow-Origin: $http_Origin';
    more_set_headers 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, HEAD';
    more_set_headers 'Access-Control-Allow-Credentials: true';
    more_set_headers 'Access-Control-Allow-Headers: Origin,Content-Type,Accept,Authorization';

    location / {
        if ($request_method = 'OPTIONS') {
            more_set_headers 'Access-Control-Allow-Origin: $http_Origin';
            more_set_headers 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, HEAD';
            more_set_headers 'Access-Control-Max-Age: 1728000';
            more_set_headers 'Access-Control-Allow-Credentials: true';
            more_set_headers 'Access-Control-Allow-Headers: Origin,Content-Type,Accept,Authorization';
            more_set_headers 'Content-Type: text/plain; charset=UTF-8';
            more_set_headers 'Content-Length: 0';
            return 204;
        }
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/example-site.com-error.log error;

    sendfile off;

    client_max_body_size 100m;

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_intercept_errors off;
        fastcgi_buffer_size 16k;
        fastcgi_buffers 4 16k;
    }

    location ~ /\.ht {
        deny all;
    }
}
4
Hasnat Safder

場合によっては、alwaysでadd_headerディレクティブを使用して、allHTTP応答コードをカバーする必要があります。

location / {
    add_header 'Access-Control-Allow-Origin' '*' always;
}

ドキュメント から：

Alwaysパラメーターが指定されている場合（1.7.5）、応答コードに関係なくヘッダーフィールドが追加されます。

応答コードが200、201（1.3.10）、204、206、301、302、303、304、307（1.1.16、1.0.13）、または308（1.13）の場合、指定されたフィールドを応答ヘッダーに追加します.0）。パラメータ値には変数を含めることができます。

3
laimison

私の場合、Rails 5を使用して、唯一の実用的な解決策はrack-cors宝石。そのようです：

/ Gemfile内

# Gemfile
gem 'rack-cors'

config/initializers/cors.rb

# config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'localhost:4200'
    resource '*',
      headers: :any,
      methods: %i(get post put patch delete options head)
  end
end

ソース： https://til.hashrocket.com/posts/4d7f12b213-Rails-5-api-and-cors

0
user9869932