Paaiškinta „Access-Control-Allow-Origin“ antraštė - su CORS pavyzdžiu

Dažnai skambindami API, konsolėje galite pamatyti klaidą, kuri atrodo taip:

 Access to fetch at '//somesite.com' from origin '//yoursite.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin 

Šiame įraše mes sužinosime, kodėl įvyksta ši klaida ir kaip galite ją ištaisyti.

Kas yra Access-Control-Allow-Originantraštė?

Access-Control-Allow-Originyra CORS antraštė. „CORS“ arba „Cross Origin Resource Sharing“ yra naršyklių mechanizmas, leidžiantis A kilmės vietoje veikiančiai svetainei prašyti išteklių iš B kilmės.

Kilmė yra ne tik pagrindinio kompiuterio vardas, bet ir prievado, pagrindinio kompiuterio pavadinimo ir schemos derinys, pvz., //mysite.example.com:8080/

Štai pavyzdys, kur tai veikia -

  1. Turiu savo kilmės: //mysite.comir aš noriu gauti lėšų iš kilmės B: //yoursite.com.
  2. Siekdama apsaugoti jūsų saugumą, naršyklė neleis man pasiekti jūsų svetainės.com išteklių ir blokuos mano užklausą.
  3. Norint leisti kilmės šaliai A pasiekti jūsų išteklius, jūsų kilmė B turės pranešti naršyklei, kad man gerai gauti šaltinių iš jūsų kilmės.

Štai pavyzdys iš „Mozilla“ kūrėjų tinklo, kuris tai tikrai gerai paaiškina:

Naudodamiesi CORS, naršyklės leidžia ištakoms dalytis ištekliais.

Yra keletas antraščių, leidžiančių dalytis ištekliais iš visos kilmės, tačiau pagrindinė yra Access-Control-Allow-Origin. Tai nurodo naršyklei, kokia kilmė leidžiama gauti užklausas iš šio serverio.

Kas turi nustatyti Access-Control-Allow-Origin?

Norėdami suprasti, kam reikia nustatyti šią antraštę, apsvarstykite šį scenarijų: Jūs naršote svetainėje, kuri naudojama dainoms peržiūrėti ir klausytis. Svetainė bando piktybiškai užmegzti ryšį su jūsų banku fone.

Taigi kas turi didžiausią galimybę užkirsti kelią šiai kenkėjiškai svetainei pavogti jūsų duomenis iš banko? Bankas! Taigi bankas turės apsaugoti savo išteklius nustatydamas Access-Control-Allow-Originantraštę kaip atsakymo dalį.

Tiesiog nepamirškite: kilmės, atsakingos už išteklių aptarnavimą, reikės nustatyti šią antraštę.

Kaip naudoti ir kada perduoti šią antraštę

Čia pateikiamas vertybių, kurias galite nustatyti, pavyzdys:

  1. Access-Control-Allow-Origin : * : Leidžia bet kokią kilmę.
  2. Access-Control-Allow-Origin : //mysite.com : Leisti užklausas tik iš mysite.com.

Žiūrėkite tai veikiant

Pažvelkime į pavyzdį. Šį kodą galite patikrinti mano „GitHub“ repo.

Mes sukursime serverį pagal kilmę A, //localhost:8000kuris siųs s eilutę Helloį apigalinį tašką. Mes ketiname paskambinti naudodami šį galinį tašką sukurdami klientą iš kilmės B //localhost:3000ir tada naudodami „Fetch“ prašyti ištekliaus. Tikimės, kad HelloB kilmės naršyklės konsolėje pamatysime eilutę, perduotą pagal A kilmę.

Tarkime, kad turime ištakas, //localhost:8000kuri tarnauja šiam ištekliui /api. Serveris siunčia atsakymą su antrašte Access-Control-Allow-Origin.

const express = require("express"); const app = express(); const port = process.env.SERVER_PORT || 8000; // Add Access Control Allow Origin headers app.use((req, res, next) => { res.setHeader("Access-Control-Allow-Origin", "//yoursite.com"); res.header( "Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept" ); next(); }); app.get("/api", (req, res) => { res.json("Hello"); }); app.listen(port, () => console.log(`Listening on port ${port}`)); 

Kliento pusėje galite paskambinti šiam tikslui skambindami fetchtaip:

fetch('//localhost:8000/api') .then(res => res.json()) .then(res => console.log(res)); 

Dabar atidarykite naršyklės konsolę, kad pamatytumėte rezultatą.

Kadangi antraštė šiuo metu nustatyta leisti leisti naudotis tik iš //yoursite.com, naršyklė blokuoja prieigą prie ištekliaus ir konsolėje pamatysite klaidą.

Norėdami tai išspręsti, pakeiskite antraštes į šią:

 res.setHeader("Access-Control-Allow-Origin", "*"); 

Patikrinkite savo naršyklės pultą ir dabar galėsite pamatyti eilutę Hello.

Domina daugiau mano vadovėlių ir „JSBytes“? Užsisakykite mano naujienlaiškį.