NGINX'e Access-Control-Allow-Origin'i nasıl eklerim?

Access-Control-Allow-Origin başlığını nasıl ayarlarım, böylece ana etki alanımdaki alt etki alanımdan web-fontları kullanabilirim?

Notlar:

HTML5BP Sunucusu'ndaki çoğu HTTP sunucusu için bunun ve diğer başlıkların örneklerini https://github.com/h5bp/server-configs projelerinde bulabilirsiniz.

Nginx'in http://wiki.nginx.org/NginxHttpHeadersModule ile derlenmesi gerekir (varsayılan olarak Ubuntu ve diğer Linux dağıtımlarında). O zaman bunu yapabilirsin

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

Daha güncel bir cevap:

#
# 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';
     }
}

kaynak: https://michielkalkman.com/snippets/nginx-cors-open-configuration.html

Access-Control-Expose-HeadersÖzel ve / veya 'basit olmayan' başlıklarınızı ajax isteklerine göstermek için (Erişim Kontrolü-İzin Ver-Üstbilgileri ile aynı biçimde) de eklemek isteyebilirsiniz .

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/tr/tutorials/cors/

Diğer web sunucuları için yapılandırma http://enable-cors.org/server.html

İşte GET | POST için kopyalamanın bir kısmını engelleyen yazdığım makale. Seni Nginx'te CORS'a götürmeli.

nginx erişim kontrolü orijinale izin veriyor

İşte gönderideki örnek pasaj:

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

Öncelikle, @hellvinz yanıtının benim için çalıştığını söylememe izin verin:

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

Ancak, bu soruyu ayrı bir cevap ile cevaplamaya karar verdim çünkü sadece bu çözümü bir çözüm aradıktan yaklaşık on saat sonra çalıştırmayı başardım.

Görünen o ki, Nginx varsayılan olarak herhangi bir (doğru) font MIME türü tanımlamıyor. Takip ederek bu tuorial ben aşağıdakileri ekleyebilirsiniz bulundu:

application/x-font-ttf           ttc ttf;
application/x-font-otf           otf;
application/font-woff            woff;
application/font-woff2           woff2;
application/vnd.ms-fontobject    eot;

Benim için etc/nginx/mime.typesdosyanın. Belirtildiği gibi, yukarıdaki çözüm daha sonra çalıştı.

Nginx'in geleneksel add_header yönergesi, 4xx yanıtıyla çalışmıyor. Onlara hala özel başlıklar eklemek istediğimiz için, 4xx yanıtlarıyla çalışan more_set_headers yönergesini kullanabilmek için ngx_headers_more modülünü kurmamız gerekiyor.

sudo apt-get install nginx-extras

Sonra nginx.conf dosyasında more_set_headers kullanın , örneğimi aşağıya yapıştırdım

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

Bazı durumlarda, tüm HTTP yanıt kodlarını kapsayacak şekilde add_headeryönergeleri kullanmanız gerekir .always

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

Gönderen belgeler :

Her zaman parametre belirtilirse (1.7.5), yanıt kodundan bağımsız olarak başlık alanı eklenir.

Belirtilen alanı, cevap kodunun 200, 201 (1.3.10), 204, 206, 301, 302, 303, 304, 307 (1.1.16, 1.0.13) veya 308'e (1.13) eşit olması koşuluyla bir cevap başlığına ekler. .0). Parametre değeri değişkenler içerebilir.

Benim durumumda, Rails 5 kullanarak, sadece çalışan çözüm rack-corsgem'i ekliyordu . Bunun gibi:

içinde / Gemfile

# Gemfile
gem 'rack-cors'

config / initializers / cors.rb içinde

# 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

kaynak: https://til.hashrocket.com/posts/4d7f12b213-rails-5-api-and-cors