NGINX에서 Access-Control-Allow-Origin을 어떻게 추가합니까?

기본 도메인의 하위 도메인에서 웹 글꼴을 사용할 수 있도록 Access-Control-Allow-Origin 헤더를 어떻게 설정합니까?

노트:

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

더 최신 답변 :

#
# 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와 동일한 형식으로) 추가 할 수도 있습니다 .

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/

다른 웹 서버에 대한 구성 http://enable-cors.org/server.html

다음은 GET | POST의 중복을 피하는 필자가 작성한 기사입니다. Nginx에서 CORS를 사용할 수 있습니다.

nginx 액세스 제어 원점 허용

다음은 게시물의 샘플 스 니펫입니다.

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

먼저 @hellvinz 답변이 효과가 있다고 말하겠습니다.

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

그러나 솔루션을 찾는 데 약 10 시간을 더 투자 한 후에 만이 솔루션을 작동 시키므로 별도의 답변 으로이 질문에 대답하기로 결정했습니다.

Nginx는 기본적으로 (올바른) 글꼴 MIME 유형을 정의하지 않는 것 같습니다. 이 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파일로 언급했듯이 위의 솔루션은 효과가있었습니다.

Nginx의 전통적인 add_header 지시문은 4xx 응답으로 작동하지 않습니다. 우리는 여전히 커스텀 헤더를 추가하고 싶기 때문에 4xx 응답과 함께 작동하는 more_set_headers 지시문을 사용할 수 있도록 ngx_headers_more 모듈을 설치해야합니다.

sudo apt-get install nginx-extras

그런 다음 사용 more_set_headers을 nginx.conf 파일에서, 나는 아래에있는 내 샘플 붙여 넣은

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

어떤 경우에는 모든 HTTP 응답 코드 를 다루기 위해 add_header지시문 을 사용해야 합니다 .always

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). 매개 변수 값은 변수를 포함 할 수 있습니다.

필자의 경우 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