Jak włączyć CORS w Nginx

Udostępnianie zasobów krzyżowych (CORS) jest ważną funkcją bezpieczeństwa aplikacji internetowych. Umożliwia aplikacjom internetowym korzystanie z zasobów z innych domen, jednocześnie zapobiegając złośliwemu dostępowi. Umożliwiając CORS w Nginx, możemy upewnić się, że nasze aplikacje internetowe są bezpieczne i że mogą uzyskać dostęp do zasobów z innych domen. Dzięki odpowiedniej konfiguracji możemy upewnić się, że złośliwe żądania są zablokowane i że nasze aplikacje są bezpieczne.

W tym artykule przyjrzymy się, jak włączyć CORS w Nginx.

Jak włączyć CORS w Nginx

Nginx to serwer internetowy open source, który jest często używany do obsługi treści statycznej. Służy również do żądań proxy do innych serwerów internetowych, takich jak Apache. Aby włączyć CORS w Nginx, musimy dodać kilka dyrektyw konfiguracyjnych.

Prosta konfiguracja umożliwiająca CORS w Nginx wygląda tak:

lokalizacja / add_header „Access-Control-Allow-Origin” *; add_header „Access-Control-Allow-Methods” „Get, Post, opcje”; add_header „Access-Control-Allow-Headers” „Autoryzacja”;

12345

lokalizacja / add_header „Access-Control-Allow-Origin” *; add_header „Access-Control-Allow-Methods” „Get, Post, opcje”; add_header „Access-Control-Allow-Headers” „Autoryzacja”;

Pierwsza dyrektywa dodaje nagłówek do odpowiedzi, która umożliwia wszystkie pochodzenie dostęp do zasobu. Druga dyrektywa dodaje nagłówek, który określa, które metody są dozwolone. Trzecia dyrektywa dodaje nagłówek, który umożliwia wysłanie nagłówka autoryzacji z żądaniami.

Oprócz tych dyrektyw należy również skonfigurować URL URL w konfiguracji Nginx. Ten blok określi, które konkretne adresy URL mogą być dostępne za pośrednictwem CORS. Na przykład:

lokalizacja / api / add_header „Access-Control-Allow-Origin” *; add_header „Access-Control-Allow-Methods” „Get, Post, opcje”; add_header „Access-Control-Allow-Headers” „Autoryzacja”;

12345

Ta konfiguracja pozwoli każdemu pochodzeniem uzyskać dostęp do adresów URL /API/. Możliwe jest również określenie określonych domen, które mogą uzyskać dostęp do zasobu. Na przykład:

lokalizacja/API/add_header „Access-Control-Allow-Origin” „https: // Przykład.com "; add_header" Access-Control-Allow-Methods "" get, Post, opcje "; add_header" Access-Control-Allow-Headers "" autoryzacja ";

12345

Pozwoli to jedynie żądania z przykładu.com, aby uzyskać dostęp do adresów URL, które zaczynają się od /API/. Możesz zezwolić na wiele domen, powtarzając tę linię z innymi domenami.

Zezwolić Access-Control-Allow-Origin (CORS) Autoryzacja tylko dla określonych plików. Na przykład, aby umożliwić CORS dla czcionek używa tylko następującego przykładu:

if ($ nazwa pliku ~* ^.*?\.(eot) | (OTF) | (ttf) | (woff) $) add_header Access-Control-Alg-Origin *;

123	if ($ nazwa pliku ~* ^.?\.(eOT) \| (OTF) \| (ttf) \| (wff) $) add_header Access-Control-Alg-origin ;

Po dodaniu niezbędnych dyrektyw konfiguracji możesz ponownie uruchomić Nginx, a zmiany wejdą w życie.

Szeroko otwarta konfiguracja Nginx Cors

Oto szeroko otwarty plik konfiguracyjny Nginx Cors, którego można użyć z serwerami Nginx. Dzięki tej konfiguracji możesz włączyć CORS i inne parametry na podstawie typów żądań.

lokalizacja / if ($ request_method = 'options') add_header 'Access-Control-Allow-Origin "*'; # # om nom Nom Nom Plaokies # add_header 'Access-Control-Allow-Credentials" true'; add_header 'Access-Control-Allow-Methods "Get, Post, opcje'; # Niestandardowe nagłówki i nagłówki Różne przeglądarki * powinny * być w porządku, ale nie są # add_header 'access-control-allow-headers" dnt, x- Customheader, utrzymujący, użytkownik-agent, odnoszący się X-z, if-modyfikowany, sterowanie pamięcią podręczną, typ treści ”; # # Powiedz klienta, że te informacje przed lotem są ważne przez 20 dni # add_header 'Access-Control-Max-AGE' 1728000; add_header 'content-type "text/zwykły charset = utf-8'; add_header 'content-długości' 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, utrzymujący, użytkownik-agent, odnoszący się X-z, if-modyfikowany, control, typ treści; 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, użytkownika-agent, X-powtórz -Czy, kontrola pamięci podręcznej, typ treści ”;

1234567891011121314151617181920212223242526272829303132333435

lokalizacja / if ($ request_method = 'options') add_header 'Access-Control-Allow-Origin' '*'; # # Om nom nom ciasteczka # add_header 'Access-Control-Allow-Creredentials „True”; add_header „Access-Control-Allow-Methods” „Get, Post, Options”; # # Niestandardowe nagłówki i nagłówki Różne przeglądarki * powinny * być w porządku, ale nie są # add_header 'Access-Control-Allow-Headers' 'DNT, X-Customheader, Keep-Alive, użytkownik-agent, odnoszący się do X-odpowiadający, If-modyfikowane sceni, kontrola pamięci podręcznej, typ treści '; # # Powiedz klienta, że te informacje przed lotem są ważne przez 20 dni # add_header 'Access-Control-Max-AGE' 1728000; add_header 'content-type' 'tekst/zwykły charset = utf-8'; add_header „content długość” 0; powrót 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-Zezwoleni „DNT, X-Customheader, Keep-alive, użytkownik-agent, powtarzanie X-z, if-modyfikowanym scena, sterowanie pamięcią podręczną, typ treści”; 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, użytkownik-agent, odnoszący się X-z, if-modyfikowany-since, Cache-Control, Content-Type”;

Zasób: https: // Michielkalkman.com/fragmenty/nginx-cors-open-configuration/

Testowanie konfiguracji CORS

Po włączeniu CORS w Nginx należy przetestować konfigurację, aby upewnić się, że działa poprawnie. Najłatwiejszym sposobem na to jest użycie narzędzia takiego jak Lister lub Curl, aby złożyć wniosek do zasobu, które chcesz przetestować.

Podczas składania wniosku należy dodać nagłówek pochodzenia. Na przykład, jeśli testujesz adres URL, który zaczyna się /API/, Powinieneś dodać pochodzenie nagłówka: https: // przykład.com. Powinieneś także dodać nagłówek-recepty-rezygnacji z metodą metodą, którą chcesz przetestować.

curl -v http: // your_domain.com

Po złożeniu prośby należy sprawdzić odpowiedź. Jeśli CORS jest włączony prawidłowo, powinieneś zobaczyć nagłówek dostępu-control-alig-origin z wartością pochodzenia określonego w żądaniu.

Zrozumienie żądań CORS

Aby zrozumieć, jak działa CORS, ważne jest zrozumienie różnych rodzajów żądań, które można wysłać. Istnieją dwa rodzaje żądań: proste żądania i żądania przed lotem.

Proste żądania są żądaniami, które nie wymagają kontroli przed lotem. Te żądania to zazwyczaj lub żądania post, które nie mają żadnych niestandardowych nagłówków.

Żądania przed lotem są bardziej złożone żądania wymagające dodatkowego kroku. Te żądania zwykle mają niestandardowe nagłówki lub metodę inną niż Get lub Post. Przed wysłaniem wniosku przeglądarka złoży początkowe żądanie, znane jako żądanie przed lotem, w celu ustalenia, czy żądanie powinno być dozwolone.

Jeśli żądanie przed lotem jest dozwolone, przeglądarka wyśle rzeczywiste żądanie. Jeśli żądanie przed lotem jest niedozwolone, przeglądarka nie wyśle rzeczywistych żądania, a zasób nie będzie dostępny.

Proces udostępniania zasobów między originami (CORS)

Wniosek

W tym artykule przyjrzeliśmy się, jak włączyć CORS w Nginx. Widzieliśmy, jak dodać niezbędne dyrektywy konfiguracyjne i bloki lokalizacji do naszej konfiguracji Nginx. Przyjrzeliśmy się również, jak przetestować naszą konfigurację CORS i jak zrozumieć żądania CORS.

Dziękuje za przeczytanie! Jeśli masz jakieś pytania lub komentarze, zostaw je w sekcji komentarzy poniżej.

Jak włączyć CORS w Nginx