Как мне установить заголовок Access-Control-Allow-Origin, чтобы я мог использовать веб-шрифты из моего поддомена в моем основном домене?
Ноты:
Вы найдете примеры этого и других заголовков для большинства HTTP-серверов в проектах HTML5BP Server Configs. https://github.com/h5bp/server-configs
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), чтобы предоставлять ваши пользовательские и / или «непростые» заголовки для запросов 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/
Конфиги для других веб-серверов http://enable-cors.org/server.html
Вот написанная мною статья, в которой отсутствует дублирование GET | POST. Это должно помочь вам начать работу с CORS в Nginx.
контроль доступа 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 *;
}
Однако я решил ответить на этот вопрос отдельным ответом, так как мне удалось заставить это решение работать только после того, как я потратил еще около десяти часов на поиски решения.
Кажется, что Nginx по умолчанию не определяет никаких (правильных) MIME-типов шрифтов. Следуя этот учебник Я обнаружил, что могу добавить следующее:
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. Поскольку мы по-прежнему хотим добавлять к ним собственные заголовки, нам необходимо установить модуль ngx_headers_more, чтобы иметь возможность использовать директиву more_set_headers, которая также работает с ответами 4xx.
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;
}
}
В некоторых случаях вам нужно использовать add_header
директивы с always
покрывать все Коды ответа HTTP.
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