Làm cách nào để thêm Access-Control-Allow-Origin trong NGINX?

Làm cách nào để đặt tiêu đề Access-Control-Allow-Origin để tôi có thể sử dụng phông chữ web từ tên miền phụ trên tên miền chính của mình?

Ghi chú:

Bạn sẽ tìm thấy các ví dụ về tiêu đề này và các tiêu đề khác cho hầu hết các máy chủ HTTP trong các dự án Configs máy chủ HTML5BP https://github.com/h5bp/server-configs

Nginx phải được biên dịch với http://wiki.nginx.org/NginxHttpHeadersModule (mặc định trên Ubuntu và một số bản phân phối Linux khác). Sau đó, bạn có thể làm điều này

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

Một câu trả lời cập nhật hơn:

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

nguồn: https://michielkalkman.com/snippets/nginx-cors-open-configuration.html

Bạn cũng có thể muốn thêm Access-Control-Expose-Headers(ở cùng định dạng với Kiểm soát truy cập-Cho phép-Tiêu đề) để hiển thị các tiêu đề tùy chỉnh và / hoặc 'không đơn giản' của bạn đối với các yêu cầu 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/

Liên kết cho các máy chủ web khác http://enable-cors.org/server.html

Đây là bài viết mà tôi đã viết để tránh một số trùng lặp cho GET | POST. Nó sẽ giúp bạn đi với CORS ở Nginx.

kiểm soát truy cập nginx cho phép xuất xứ

Đây là đoạn mẫu từ bài viết:

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

Đầu tiên, hãy để tôi nói rằng câu trả lời @hellvinz đang làm việc cho tôi:

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

Tuy nhiên, tôi đã quyết định trả lời câu hỏi này bằng một câu trả lời riêng vì tôi chỉ có thể làm cho giải pháp này hoạt động sau khi đặt thêm khoảng mười giờ để tìm kiếm giải pháp.

Dường như Nginx không xác định bất kỳ loại MIME phông chữ (chính xác) nào theo mặc định. Bằng cách theo dõi tu sĩ này, tôi thấy tôi có thể thêm vào như sau:

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.typestập tin của tôi . Như đã nêu, các giải pháp trên sau đó làm việc.

Lệnh add_header truyền thống của Nginx không hoạt động với phản hồi 4xx. Vì chúng tôi vẫn muốn thêm các tiêu đề tùy chỉnh cho chúng, chúng tôi cần cài đặt mô-đun ngx_headftimemore để có thể sử dụng chỉ thị more_set_headers, cũng hoạt động với các phản hồi 4xx.

sudo apt-get install nginx-extras

Sau đó sử dụng more_set_headers trong tệp nginx.conf, tôi đã dán mẫu của mình bên dưới

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

Trong một số trường hợp, bạn cần sử dụng add_headercác lệnh alwaysđể bao gồm tất cả các mã phản hồi HTTP.

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

Từ tài liệu :

Nếu tham số luôn được chỉ định (1.7.5), trường tiêu đề sẽ được thêm bất kể mã phản hồi.

Thêm trường được chỉ định vào tiêu đề phản hồi với điều kiện mã phản hồi bằng 200, 201 (1.3.10), 204, 206, 301, 302, 303, 304, 307 (1.1.16, 1.0.13) hoặc 308 (1.13 .0). Giá trị tham số có thể chứa các biến.

Trong trường hợp của tôi, sử dụng Rails 5, giải pháp làm việc duy nhất là thêm rack-corsđá quý. Thích như vậy:

trong / Đá quý

# Gemfile
gem 'rack-cors'

trong cấu hình / khởi tạo / 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

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