API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway) · Oppitunti

Cross-Origin Resource Sharing (CORS)

Toteuttakaa CORS-käytännöt Nginxissä, jotta API-rajapinnoille voidaan tehdä turvallisia pyyntöjä eri toimialueilta.

Oppitunti 2/412 vaihetta

Cross-Origin Resource Sharing (CORS) on ilmainen API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway)-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway)-kurssilla on yhteensä 4 oppituntia.

Mitä CORS on

Kuvitelkaa, että rakennatte verkkosovellusta. Käyttöliittymänne (kuten React-sovellus) toimii osoitteessa app.example.com, mutta sen on haettava tietoja API:sta, joka toimii osoitteessa api.example.com.

Tässä kohtaa Cross-Origin Resource Sharing (CORS) tulee mukaan. Se on verkkoselainten toteuttama suojausominaisuus, joka hallitsee sitä, miten yhdestä alkuperästä peräisin olevat verkkosivut voivat pyytää resursseja toisesta alkuperästä.

Saman alkuperän käytäntö

CORS lieventää selainten Same-Origin Policy -käytäntöä. Tämä käytäntö on keskeinen suojausmekanismi, joka estää haitallista verkkosivustoa lukemasta toiselta sivustolta peräisin olevia arkaluonteisia tietoja.

Alkuperä määräytyy protokollan, isäntänimen ja portin perusteella.
https://app.example.com:443 eroaa osoitteista http://app.example.com:80 ja https://api.example.com:443.

Ilman CORSia selaimet estäisivät käyttöliittymää keskustelemasta API:n kanssa, koska niiden alkuperät ovat erilaiset.

Miten CORS toimii

Kun selain havaitsee eri alkuperään kohdistuvan pyynnön, se lisää pyyntöön Origin-otsakkeen. Palvelimen on tämän jälkeen vastattava tietyillä CORS-otsakkeilla ilmoittaakseen selaimelle, että pyyntö on sallittu.

Tärkein otsake on Access-Control-Allow-Origin. Jos tämä otsake on mukana palvelimen vastauksessa ja sen arvo vastaa asiakkaan alkuperää (tai on *), selain sallii pyynnön.

Yksinkertaiset ja esilämmityspyynnöt

CORS-pyynnöt voidaan jakaa kahteen tyyppiin:

Yksinkertaiset pyynnöt: Nämä ovat suoria GET-, HEAD- tai POST-pyyntöjä, joissa käytetään tiettyjä sisältötyyppejä (kuten text/plain). Selain lähettää ne heti ja odottaa vastaukseen CORS-otsakkeita.
Esilämmityspyynnöt: Monimutkaisemmissa pyynnöissä (esimerkiksi PUT, DELETE, mukautetut otsakkeet tai tietyt sisältötyypit) selain lähettää ensin OPTIONS-pyynnön. Tämä esilämmitys tarkistaa palvelimelta, onko varsinainen pyyntö turvallista lähettää.

Nginx CORS-otsakkeita varten

Koska Nginx toimii usein käänteisenä välityspalvelimena tai API-yhdyskäytävänä, se on erinomainen paikka taustapalveluiden CORS-otsakkeiden hallintaan. Nginx-direktiivien avulla vastauksiin voidaan lisätä tarvittavat Access-Control-*-otsakkeet.

Tärkein tähän tarkoitettu direktiivi on add_header, jonka avulla Nginxin vastauksiin voidaan lisätä mukautettuja HTTP-otsakkeita.

Allow-Originin määrittäminen

Määritetään Nginx sallimaan tietystä alkuperästä, https://app.example.com, tulevat pyynnöt API:inne.

Lisäämme Access-Control-Allow-Origin -otsakkeen location-lohkoon, joka käsittelee API-pyyntöjä.

server {
  listen 80;
  server_name api.example.com;

  location /api/ {
    add_header 'Access-Control-Allow-Origin' 'https://app.example.com';
    proxy_pass http://backend_api_service;
  }
}

Useiden alkuperien käsittely

Mitä tapahtuu, jos useiden käyttöliittymien on päästävä API:nne käyttöön? Useita alkuperiä ei voi luetella suoraan Access-Control-Allow-Origin -otsakkeessa. Sen sijaan Nginxin map-direktiivin avulla otsake voidaan määrittää dynaamisesti saapuvan Origin-otsakkeen perusteella.

http {
  map $http_origin $cors_origin {
    default "";
    "https://app.example.com" "https://app.example.com";
    "https://dev.example.com" "https://dev.example.com";
  }

  server {
    listen 80;
    server_name api.example.com;

    location /api/ {
      if ($cors_origin ~ ".") {
        add_header 'Access-Control-Allow-Origin' $cors_origin;
      }
      proxy_pass http://backend_api_service;
    }
  }
}

Esilämmityspyyntöjen määrittäminen

Esilämmityspyyntöjen (OPTIONS) yhteydessä selain odottaa tiettyjä otsakkeita vastauksena OPTIONS-kutsuunsa. Nginxin on siepattava nämä pyynnöt ja vastattava niihin asianmukaisilla CORS-otsakkeilla, yleensä välittämättä pyyntöä taustapalveluun.

server {
  listen 80;
  server_name api.example.com;

  location /api/ {
    # Handle preflight OPTIONS requests
    if ($request_method = 'OPTIONS') {
      add_header 'Access-Control-Allow-Origin' 'https://app.example.com';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
      add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
      add_header 'Access-Control-Max-Age' 1728000;
      add_header 'Content-Type' 'text/plain charset=UTF-8';
      add_header 'Content-Length' 0;
      return 204;
    }

    # For actual requests
    add_header 'Access-Control-Allow-Origin' 'https://app.example.com';
    proxy_pass http://backend_api_service;
  }
}

Keskeiset CORS-otsakkeet

Access-Control-Allow-Origin-otsakkeen lisäksi nämä otsakkeet ovat keskeisiä kattavan CORS-tuen kannalta:

Access-Control-Allow-Methods: Määrittää sallitut HTTP-metodit (esimerkiksi GET, POST, PUT).
Access-Control-Allow-Headers: Luettelee otsakkeet, joita asiakas saa lähettää (esimerkiksi Content-Type, Authorization).
Access-Control-Allow-Credentials: Asetetaan arvoon true, jos asiakas voi lähettää evästeitä tai käyttää HTTP-todennusta.
Access-Control-Max-Age: Määrittää, kuinka kauan selain voi tallentaa esipyyntöön saadun vastauksen välimuistiin (sekunteina).

Kattava CORS-määritys

Tässä on kattavampi Nginx-määrityksen katkelma, joka käsittelee sekä yksinkertaiset että CORS-esipyynnöt ja sallii tietyn alkuperän käyttää API:a, mukaan lukien tunnistetietojen lähettämisen.

server {
  listen 80;
  server_name api.example.com;

  location /api/ {
    set $cors_origin "https://app.example.com"; # Or use map directive

    if ($request_method = 'OPTIONS') {
      add_header 'Access-Control-Allow-Origin' "$cors_origin";
      add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
      add_header 'Access-Control-Allow-Credentials' 'true';
      add_header 'Access-Control-Max-Age' 1728000;
      add_header 'Content-Type' 'text/plain charset=UTF-8';
      add_header 'Content-Length' 0;
      return 204;
    }

    add_header 'Access-Control-Allow-Origin' "$cors_origin";
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';

    proxy_pass http://backend_api_service;
  }
}

CORS-otsakkeiden tarkistus

Mitkä seuraavista otsakkeista ovat välttämättömiä, jotta Nginx vastaa oikein CORS-esipyyntöön (OPTIONS)?

Vastaa interaktiivisessa oppitunnissa

Kertaus: Nginxin CORS

Tässä oppitunnissa opitte, mitä Cross-Origin Resource Sharing (CORS) tarkoittaa ja miksi se on tärkeä suojatuissa verkkosovelluksissa. Käsittelimme seuraavat aiheet:

Same-Origin Policy -käytännön ja sen, miksi CORS on olemassa.
Yksinkertaisten pyyntöjen ja esipyyntöjen eron.
Nginxin määrittämisen add_header- ja map-direktiivien avulla CORSin hallintaa varten.
Tärkeät CORS-otsakkeet, kuten Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers ja Access-Control-Max-Age.

Kun CORS määritetään Nginxissä oikein, käyttöliittymäsovellukset voivat viestiä suojatusti taustajärjestelmän APIen kanssa eri toimialueiden välillä.

Aloita maksutta

Opi API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway) tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Cross-Origin Resource Sharing (CORS)” ilmainen?

Kyllä – oppitunnin ”Cross-Origin Resource Sharing (CORS)” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway)-kurssin, päivitä CoddyKit PROhon. API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway)-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Cross-Origin Resource Sharing (CORS)”?

Toteuttakaa CORS-käytännöt Nginxissä, jotta API-rajapinnoille voidaan tehdä turvallisia pyyntöjä eri toimialueilta. Harjoittelet API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway)-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Cross-Origin Resource Sharing (CORS)”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway)-oppitunnilla?

Kyllä. Jokainen API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway)-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

API-versiointi Nginxillä
Cross-Origin Resource Sharing (CORS)
Pyyntömäärien rajoitus ja liikenteen säätely Nginxillä
Polkuihin perustuva reititys mikropalveluihin

← Takaisin: API-yhdyskäytävä ja käänteisvälityspalvelin (Nginx + Spring Cloud Gateway)