Pertanyaan Bagaimana cara menambahkan Access-Control-Allow-Origin di NGINX?


Bagaimana cara mengatur header Access-Control-Allow-Origin sehingga saya dapat menggunakan font-web dari subdomain saya di domain utama saya?


Catatan:

Anda akan menemukan contoh ini dan header lainnya untuk sebagian besar server HTTP dalam proyek Konfigurasi Server HTML5BP https://github.com/h5bp/server-configs


133
2017-07-20 22:57




ah akhirnya menemukan lokasi jawaban / {add_header Access-Control-Allow-Origin "*"; } - Chris McKee
ng4free.com/… - Jaydeep Gondaliya


Jawaban:


Nginx harus dikompilasi dengan http://wiki.nginx.org/NginxHttpHeadersModule (default pada Ubuntu dan beberapa distro Linux lainnya). Maka Anda bisa melakukan ini

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

157
2017-09-01 00:25



Ikuti petunjuk ini jika Anda ingin menerapkan solusi yang sama pada apache: stackoverflow.com/questions/11616306/… - camilo_u
Modul itu tampaknya dikompilasi secara default (setidaknya di Ubuntu). - Steve Bennett
juga dikompilasi secara default di amazon linux repo - Ross
Di mana file dan lokasi kita harus meletakkan arahan lokasi ini? - Sumit Arora
Itu tidak berhasil untukku. Nginx 1.10.0, Ubuntu 16.04 - Omid Amraei


Jawaban yang lebih baru:

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

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

Anda mungkin juga ingin menambahkan Access-Control-Expose-Headers (dalam format yang sama dengan Access-Control-Allow-Headers) untuk mengekspos header custom dan / atau 'non-simple' Anda ke ajax requests.

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/

Konfigurasi untuk server web lain http://enable-cors.org/server.html


29
2017-08-24 11:01



Cara apa pun untuk tidak perlu mengulangi baris ini untuk setiap lokasi? Bisakah kita meletakkannya di bawah blok {} server? - geoyws
@geoyws (tanpa @ saya tidak mendapat notifikasi); Anda bisa meletakkannya di atas lokasi, thats baik :) - Chris McKee
header access-control-expose tidak ada di sini - chovy
@chovy sebagai header opsional untuk mengekspos non-default ke permintaan ajax tapi saya bisa melihatnya membuat orang tersandung sehingga benar-benar ditambahkan. Ta - Chris McKee
Harap hindari menggunakan if di nginx - bahkan manual resmi tidak menganjurkannya. - aggregate1166877


Pertama, izinkan saya mengatakan bahwa jawaban @hellvinz bekerja untuk saya:

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

Namun, saya telah memutuskan untuk menjawab pertanyaan ini dengan jawaban terpisah karena saya hanya berhasil mendapatkan solusi ini bekerja setelah memasukkan sekitar sepuluh jam lebih untuk mencari solusi.

Tampaknya Nginx tidak mendefinisikan jenis huruf MIME (yang benar) secara default. Dengan mengikuti tuorial ini Saya menemukan bahwa saya dapat menambahkan yang berikut:

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

Untuk saya etc/nginx/mime.types mengajukan. Sebagaimana dinyatakan, solusi di atas kemudian bekerja.


6
2018-01-04 15:24



Saya biasanya mengarahkan orang-orang untuk memeriksa file tipe mime pada H5BP github.com/h5bp/server-configs-nginx/blob/master/mime.types :) - Chris McKee


Berikut adalah artikel yang saya tulis yang menghindari duplikasi untuk GET | POST. Ini harus membuat Anda pergi dengan CORS di Nginx.

kontrol akses nginx memungkinkan asal

Berikut ini cuplikan sampel dari postingan:

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

5
2018-04-17 21:15



Sesuai kebijakan SF Anda perlu menyalin informasi ke dalam pos, bukan hanya tautan ke sana. Situs web dapat menghilang kapan saja, yang berarti hilangnya informasi. - Tim
Valid point @tim, diperbarui untuk memasukkan kode - gansbrest


Direktif add_header tradisional Nginx tidak berfungsi dengan respons 4xx. Karena kami masih ingin menambahkan tajuk khusus kepada mereka, kita perlu menginstal modul ngx_headers_more agar dapat menggunakan direktif_setelah_header, yang juga berfungsi dengan respons 4xx.

sudo apt-get install nginx-extras

Kemudian gunakan more_set_headers dalam file nginx.conf, saya telah menempel contoh saya di bawah ini

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

2
2018-05-30 10:41





Dalam kasus saya, menggunakan Rails 5, satu-satunya solusi yang berfungsi telah menambahkan rack-cors permata. Seperti ini:

di / Gemfile

# Gemfile
gem 'rack-cors'

di 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

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


0
2018-05-04 23:07



bagaimana itu membantu nginx melayani file statis? - Walf
Saya menggunakan nginx sebagai proxy reverse untuk melayani aplikasi rel 5. Ini adalah kasus tertentu di mana pembatasan CORS tidak berasal dari nginx tetapi dari aplikasi Rails asal di belakangnya. - xyz