Меню

Nginx access control allow origin как настроить

Как добавить Access-Control-Allow-Origin в NGINX?

Как настроить заголовок Access-Control-Allow-Origin, чтобы я мог использовать веб-шрифты из моего поддомена в основном домене?

Вы найдете примеры этого и других заголовков для большинства HTTP-серверов в проектах сервера HTML5BP. https://github.com /h5bp /сервер-конфига

6 ответов

Nginx должен быть скомпилирован с помощью http://wiki.nginx.org/NginxHttpHeadersModule (по умолчанию для Ubuntu и некоторых других Linux дистрибутивы). Тогда вы можете сделать это

Более свежий ответ:

Вы также можете добавить Access-Control-Expose-Headers (в том же формате, что и Access-Control-Allow-Headers), чтобы разоблачить ваши пользовательские и /или «непростые» ‘заголовки для запросов ajax.

Вот статья, которую я написал, которая позволяет избежать дублирования для GET | POST. Это должно заставить вас идти с CORS в Nginx.

Вот фрагмент примера из сообщения:

Во-первых, позвольте мне сказать, что ответ @hellvinz работает для меня:

Тем не менее, я решил ответить на этот вопрос отдельным ответом, так как мне удалось получить это решение только после того, как вы нашли еще десять часов, чтобы найти решение.

Похоже, что Nginx по умолчанию не определяет никаких (правильных) шрифтов MIME. Следуя этого tuorial , я обнаружил, что я может добавить следующее:

В мой файл etc /nginx /mime.types . Как было указано, вышеупомянутое решение затем работало.

Традиционная директива add_header от Nginx не работает с ответами 4xx. Поскольку мы все еще хотим добавить к ним пользовательские заголовки, нам нужно установить модуль ngx_headers_more, чтобы иметь возможность использовать директиву more_set_headers, которая также работает с ответами 4xx.

Затем используйте more_set_headers в файле nginx.conf, я вставил свой пример ниже

В моем случае, используя Rails 5, единственным рабочим решением было добавление драгоценного камня rack-cors . Например:

Источник

Как добавить Access-Control-Allow-Origin в NGINX?

Как мне установить заголовок Access-Control-Allow-Origin, чтобы я мог использовать веб-шрифты из моего субдомена в моем основном домене?

Вы найдете примеры этого и других заголовков для большинства HTTP-серверов в проектах HTML5BP Server Config https://github.com/h5bp/server-configs

Nginx должен быть скомпилирован с http://wiki.nginx.org/NginxHttpHeadersModule (по умолчанию в Ubuntu и некоторых других дистрибутивах Linux). Тогда вы можете сделать это

Более актуальный ответ:

Вы также можете добавить Access-Control-Expose-Headers (в том же формате, что и Access-Control-Allow-Headers), чтобы предоставить ваши пользовательские и / или «непростые» заголовки для запросов ajax.

Вот статья, которую я написал, которая избегает дублирования GET | POST. Это должно помочь вам начать работу с CORS в Nginx.

Вот образец фрагмента из поста:

Во-первых, позвольте мне сказать, что ответ @hellvinz работает на меня:

Однако я решил ответить на этот вопрос отдельным ответом, поскольку мне удалось заставить это решение работать только после того, как я потратил еще около десяти часов на поиск решения.

Похоже, что Nginx по умолчанию не определяет никаких (правильных) типов MIME шрифтов. Следуя этому туориалу, я обнаружил, что могу добавить следующее:

К моему etc/nginx/mime.types файлу. Как указано выше, вышеуказанное решение сработало.

Традиционная директива Nginx add_header не работает с ответами 4xx. Поскольку мы все еще хотим добавить к ним пользовательские заголовки, нам нужно установить модуль ngx_headers_more, чтобы иметь возможность использовать директиву more_set_headers, которая также работает с ответами 4xx.

Затем используйте more_set_headers в файле nginx.conf, ниже я вставил образец

В некоторых случаях вам нужно использовать add_header директивы, always чтобы охватить все коды ответов HTTP.

Если указан параметр 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,0). Значение параметра может содержать переменные.

В моем случае, используя Rails 5, единственным работающим решением было добавление rack-cors гема. Вот так:

Источник

Настройка CORS в Nginx

CORS (cross-origin resource sharing) — совместное использование ресурсов между разными источниками . Это спецификация, которая обеспечивает действительно открытый доступ между доменами. Если вы размещаете общедоступный контент, рассмотрите возможность использования CORS, чтобы открыть его для универсального доступа из JavaScript в браузерах.

До недавнего времени основным способом преодоления ограничений, наложенных в same-origin-policy относительно XSS запросов, было использование JSONP . Сам JSONP имеет неустранимое ограничение — позволяет только получение данных GET методом , то есть отправка данных через POST метод остается недоступной.

Почему CORS важен?

За последние годы JavaScript и веб-программирование активно развиваются, но same-origin политику никто не отменял. Это препятствует тому, чтобы JavaScript делал запросы между разными доменами, что породило различные хаки для выполнения междоменных запросов.

CORS представляет стандартный механизм, который может использоваться всеми браузерами для реализации междоменных запросов. Спецификация определяет набор заголовков, которые позволяют браузеру и серверу сообщать о том, какие запросы разрешены (и не разрешены). CORS продолжает дух открытой сети, предоставляя доступ к API всем.

Правило ограничения домена (Same Origin Policy, Принцип одинакового источника) — это важная концепция безопасности для некоторых языков программирования на стороне клиента, таких как JavaScript. Политика разрешает сценариям, находящимся на страницах одного сайта, доступ к методам и свойствам друг друга без ограничений, но предотвращает доступ к большинству методов и свойств для страниц на разных сайтах. Одинаковые источники — это источники, у которых совпадают три признака: домен, порт и протокол.

Читайте также:  Что будет если сломалась тяга

Концепция правила ограничения домена появилась во времена Netscape Navigator 2.0. Скрытые производные оригинальной разработки используются во всех современных браузерах, а также в плагинах, таких как Adobe Flash либо для механизмов отличных от DOM манипуляций, таких как XMLHttpRequest.

Как это работает?

ля инициации Cross-origin запроса браузер клиента добавляет в HTTP запрос Origin (домен сайта, с которого происходит запрос). Например страница http://www.a.com/page.html пытается получить данные со страницы http://www.b.com/cors.txt. В случае если браузер клиента поддерживает технологию CORS, запрос будет выглядеть так:

Если сервер www.b.com хочет разрешить получение данных с www.a.com то в ответе сервера будет присутствовать строчка:

Если в ответе сервера отсутствует данная строка, то браузер поддерживающий технологию CORS, передаст ошибку вместо данных.

В случае, если сервер хочет разрешить доступ любому домену, он может указать в ответе:

Если сервер хочет разрешить доступ более чем одному домену, то в ответе сервера должно быть по одной строчке Access-Control-Allow-Origin для каждого домена.

На практике чаще используется запись из нескольких доменов, разделенных пробелом :

Пример конфигурации CORS для web-сервера Nginx

Читайте также

Nginx — легковесный, по сравнению с Apache, HTTP, обратный прокси сервер написанный Igor Sysoe. Официальную документацию к Nginx вы найдете здесь.…

Как регламентировать перекуры в течение рабочего дня? Можно ли разрешать опаздывать к началу рабочего дня? Можно ли чатится во время…

iReadMail пожалуй один единственный почтовый сервер, установку которого запустил и все произошло само собой. Единственное что вам необходимо — только…

Источник

Nginx Access-Control-Allow-Origin and CORS

Nginx Access-Control-Allow-Origin header is part of CORS standard (stands for Cross-origin resource sharing) and used to control access to resources located outside of the original domain sending the request.

This standard was created to overcome same-origin security restrictions in browsers, that prevent loading resources from different domains. With the raise of single page apps relying heavily on external API’s and JavaScript apps in general, the need for CORS server configuration is greater than ever. Please note that Fonts ( @font-face within CSS ) and potentially other resources are also affected by same-origin policy.

Ok, so here is the sample of CORS configuration for Nginx:

As you can tell by Access-Control-Allow-Origin * – this is wide open configuration, meaning any client will be able to access the resource.

You can list specific hostnames that are allowed to access the server:

add_header «Access-Control-Allow-Origin» «http://test.com, https://example.com»

If you wonder what’s if ($request_method = OPTIONS ) condition, you are not alone. There is slightly confusing concept of Simple and Pre-flight CORS requests (see detailed cors spec).

In the nutshell Simple request is GET, HEAD or POST methods without special headers. In this case request looks like this:

and our Nginx config snippet to handle simple requests:

If the request involves PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH methods or any special headers not listed for the Simple Request ( see the spec link I gave above ), then it’s treated as Preflighted request. Don’t be scared by fancy words here, in case of preflighted request the client needs to send two requests:

  1. OPTIONS request first to verify what’s allowed. Here is our Nginx config part for that:
  2. Once the client receives the response and checks that original request is allowed. It issues second request with original data.

Here is the diagram to show requests flow:

Here are a couple useful CURL command that I use to test the implementation:

curl -s -D — -H «Origin: http://example.com» https://api.example.com/my-endpoint -o /dev/null

You should see Access-Control-Allow-Origin header if everything look good.

To test Preflighted requests, just add -X OPTIONS like this:

curl -s -D — -H «Origin: http://example.com» -X OPTIONS https://api.example.com/my-endpoint -o /dev/null

If you want dive deeper into Nginx access control allow origin and CORS here is excellent post that I already mentioned before – https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Wake up, Neo. The matrix has you.

Join our growing UNDERGROUND MOVEMENT of Rain Makers. Just drop your email below and your life will never be the same again.

Feel free to reach out on Twitter, Facebook or Instagram.

Ha, great! Thanks for signing to my list. Don’t forget to subscribe to social channels for «real-time» stuff and lets rock together!

16 thoughts on “Nginx Access-Control-Allow-Origin and CORS”

I have added this as stated by you, but it gave me 404 Not Found error, nginx 1.10 ubuntu 16.04 TLS

Can you you paste your configuration as in Nginx is so many little important details that need to seen?

Hello Sergey. Thanks for your great work and any guidance you can provide here.

Building a mini CDN on same server a sub-domain and the CORs started throwing errors for theme/plugins .woff and .ttf. violations.

As simple as you put it I used the first statement and it stopped the error immediately:
add_header “Access-Control-Allow-Origin” https://mydomain.com;

No errors now. good.

Later that day I realized I couldn’t upload images from a front end uploader due to the:

XMLHttpRequest cannot load https://cdn.mydomain.com/wp-content/plugins/myplugin/core/lib/upload/my-image-upload.php. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://maindomain.com’ is therefore not allowed access. The response had HTTP status code 500.

(even though there is the header above which fixed the first errors.

Then I added as you put above for the pre-flight:

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;

And it swiftly broke all the images (jpg|png) served by the https://sub.samedomain.com throughout the site.

Everything else I had tried from the Github and other articles that brought me here broke nginx and the sites on that machine. So at least I am one step ahead.

I am loading these blocks in nginx.my/myfile.conf statements as our nginx.conf is updated to overwrite when new version deployed.

Everything is https

#AUTOMATICALLY GENERATED – DO NO EDIT!

user www-data www-data;
pid /var/run/nginx.pid;
worker_processes 1;
worker_rlimit_nofile 100000;

events <
worker_connections 4096;
include /etc/nginx.custom.events.d/*.conf;
>

http <
default_type application/octet-stream;

access_log off;
error_log /var/log/nginx/error.log crit;

sendfile on;
tcp_nopush on;

keepalive_timeout 20;
client_header_timeout 20;
client_body_timeout 20;
reset_timedout_connection on;
send_timeout 20;

gzip on;
gzip_disable “msie6”;
gzip_proxied any;
gzip_min_length 256;
gzip_comp_level 4;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript text/x-js;

include mime.conf;
charset UTF-8;

open_file_cache max=100000 inactive=20s;
open_file_cache_valid 30s;
open_file_cache_min_uses 2;
open_file_cache_errors on;

server_tokens off;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

include proxy.conf;
include fcgi.conf;

include conf.d/*.conf;
include /etc/nginx.custom.d/*.conf;
>


nginx 1.10 Ubuntu 16.04

Can you share configs related to the location where u use add_header “Access-Control-Allow-Origin”? Nginx settings from http section are not very useful and I don’t see any CORS related settings there. Also please use gist or pastebin for big inserts as it’s easier to read.

Sorry about that Sergey. Thank you I will get that info when back at my desk tomorrow. Cheers!

I appreciate it Sergey:/

When you add this line to the cors.conf:

`add_header “Access-Control-Allow-Origin” https://mydomain.com;` you essentially adding this header for all requests to all resources on your server ( static / dynamic files ). I would recommend to add it only to resources that needs it (specific locations). But honestly it’s not a big deal, just optimization.

Now, your main problems comes after you added:

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

You can’t just add those lines ot the cors.conf. If you do that you are essentially replaying with 200 code without a body to all of the requests ( that’s why I think all you images disappeared ). You only need to respond with status 200 to the preflighted OPTIONS request. That’s why there is an if condition and check for the $request_method:

““
if ($request_method = OPTIONS ) <
add_header “Access-Control-Allow-Origin” https://mydomain.com;
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;
>
““

There is one more detail. You can’t just add this block above to your cors.conf file as Nginx will give you this error: “add_header” directive is not allowed here. You need to add this if block to some location in your code, possibly inside:

““
location / <
if ($request_method = OPTIONS ) <
add_header “Access-Control-Allow-Origin” https://mydomain.com;
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;
>
try_files $uri $uri/ /index.php?$args;
>
““
Try it. See what you get. The file separation in your config, while good in theory may not be ideal for CORS as they usually location specific, not general sitewide config. (due to the nature of Nginx if handling ).

The cors file I included is only called on in this test “separate” from other domains on this machine. The other 2 files exist for WordPress function for clients.

I will make a separate file to be included as standalone to get the desired result and omit the other includes.

Sorry I don’t get your syntax (or if it’s truncated) where you put the try_files/…$args: above without closing braces. Can you show me how you would put that whole statement (as you said “inside”?)

From what I get you are saying it should be possible easily to just make one .conf file “combined”.

thanks so much again for your expertise.

A bit fussy (as is usual) but that nailed it. This is more about a knowledge catalog for reference for some things you don’t do often, but need in the library. Thanks so much Sergey I will be back to read all your secrets…

Glad you figured it out Stu. Don’t forget to sign up to the newsletter as I have more things coming related to webapps performance 😉

throw me – 2017/04/28 14:01:47 [emerg] 4594#4594: unexpected end of file, expecting “>” in /etc/nginx.cors/cors.conf:7

7 if ($request_method = OPTIONS ) <

I thought you got rid if cors.conf? That sample I gave you is based on your wordpress.conf file. According to the error you missed > somewhere in your configuration. Try removing chunks of code to figure out where you missed it.

I just didn’t rename it for that particular site I used it “as” wordpress.conf and did not “include” both files. (if that makes sense). Meaning your gist would work for that domain instead of wordpress.conf.

Post whole config again if you didn’t figure it out. “unexpected end of file, expecting “>” means you skipped closing curly brace somewhere, most likely in cors.conf

below is my conf file, i am running this website with a uwsgi proxy.
what i should i add to the conf so that it allows the external access to my jquery requests ?

server <
listen 80;
server_name 10.172.97.146;
charset utf-8;
client_max_body_size 75M;

location / <
try_files $uri @yourapplication;
>
location @yourapplication <
include uwsgi_params;
uwsgi_pass unix:/var/www/nsbumobile/nsbumobile_uwsgi.sock;
>
>

Leave a Reply Cancel reply

I’ve been involved in software development for the past 12 years.

I wrote A LOT of code.

I orchestrated thousands of servers.

I supported mission-critical databases in complicated multi-region environments.

I helped to build and maintain the infrastructure for Game of Thrones, the biggest and most popular show in the world.

Do you want to know the single most important thing that I learned over the years?

NONE OF IT REALLY MATTERED…

Yes, it was fun for a while.

Yes, like most of us engineers I was making good money.

But at the end of the day, I would still have to show up at work and sell my time.

Sometimes I would come in, sit in my cubicle and dream about things I could do instead of staring at the screen all day long…

I could go to the beach with my wife and my son.

I could fly to El Classico game in Barcelona with my brother and watch Messi scoring amazing goals.

I could organize a surfing trip to South Africa and other awesome places around the world. Places I’ve never seen.

I could work on my own projects that would make the impact in the world or at the very least, make me some money.

Hell, I could just sit home and do absolutely nothing!

And yet there I was still in my cubicle 12 years later with big hopes and dreams and pretty much nothing to show for…

The tipping point for me was when I started buying games on Steam and GoG and playing them in my mind.

Nothing to install, no need to upgrade video cards, no need to feel bad in front of my wife, no time to waste…

You are right, I was spiraling down and needed a break, but more so I felt like I needed some radical changes in my life.

I’m sure you heard this saying before: “Insanity: doing the same thing over and over again and expecting different results”

It became clear that the road I was walking on would lead me to mediocre life.

The problem was that I didn’t want to be mediocre. I wanted my life to be awesome, full of fun, happiness and excitement!

I wanted to make a difference in the world, leave a legacy, make my kids proud, live without regrets, discover my true purpose.

So about a year ago, I set out on my new journey…

I left my old comfortable job, attended multiple high profile non-technical events (including Tony Robbins UPW), joined an expensive business program, hired a personal coach and mentor, met a bunch of people who were able to disconnect from the Matrix and never looked back.

And let me tell you – there is another world out there, something we technical guys don’t get to experience!

Now, here is my question for you:

Do you want to continue to be just a tool in someone else’s hands or you want to upgrade yourself and become a Rain Maker?

If you want to find out who you really are, take full control of your life, step outside your comfort zone in order to grow physically, mentally and financially and help others along the way, then the Red pill is for you. Just drop your email in the field below and we’ll be in touch.

Take a Blue pill and you will forget that we ever met. You will close this popup and continue reading articles about Nginx, Kubernetes, Docker, secretly dreaming of life that you could have… (or pathetically thinking that you will have it one day just by perfecting technical skills)

Источник

Adblock
detector