Az Access-Control-Allow-Origin fejléc elmagyarázva - CORS példával

Programozás

Az API hívásakor gyakran előfordulhat, hogy a konzolon egy ilyen hibát lát:

 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

Ebben a bejegyzésben megtudjuk, miért történik ez a hiba, és hogyan lehet kijavítani.

Mi a Access-Control-Allow-Originfejléc?

Access-Control-Allow-Originegy CORS fejléc. A CORS vagy a Cross Origin Resource Sharing egy olyan mechanizmus, amely lehetővé teszi a böngészők számára, hogy az A származási helynél futó webhelyek engedélyezzék az erőforrások bekérését a B származásból.

Az eredet nemcsak a hosztnév, hanem a port, a hosztnév és a séma kombinációja, például - //mysite.example.com:8080/

Itt van egy példa arra, hogy ez hol lép működésbe -

  1. Van egy származás: //mysite.comés azt szeretné, hogy forrásokat eredetű B //yoursite.com.
  2. Az Ön biztonsága érdekében a böngésző nem engedi, hogy hozzáférjek a yoursite.com forrásaihoz, és blokkolja a kérésemet.
  3. Annak érdekében, hogy az A származás hozzáférhessen az erőforrásaihoz, a B származásnak tudatában kell adnia a böngészőnek, hogy rendben van, ha forrásokat szerzek az Ön származási helyéből.

Itt van egy példa a Mozilla Developer Network-től, amely ezt nagyon jól megmagyarázza:

A CORS segítségével a böngészők lehetővé teszik az origók számára, hogy erőforrásokat osszanak meg egymás között.

Van néhány fejléc, amely lehetővé teszi az erőforrások megosztását az eredet között, de a fő az Access-Control-Allow-Origin. Ez megmondja a böngészőnek, hogy milyen eredetűek lehetnek a kérések fogadása erről a szerverről.

Kinek kell beállítania Access-Control-Allow-Origin?

Annak megértéséhez, kinek kell beállítania ezt a fejlécet, vegye figyelembe ezt a forgatókönyvet: Olyan webhelyet böngész, amelyet dalok megtekintésére és meghallgatására használnak. A weboldal megpróbálja rosszindulatúan kapcsolatot létesíteni a háttérben lévő bankjával.

Tehát kinek van végső képessége megakadályozni, hogy ez a rosszindulatú webhely ellopja az adatait a banktól? A bank! Tehát a banknak meg kell védenie forrásait a Access-Control-Allow-Originfejléc beállításával a válasz részeként.

Ne feledje: az erőforrások kiszolgálásáért felelős származásnak be kell állítania ezt a fejlécet.

Hogyan kell használni és mikor kell továbbadni ezt a fejlécet

Íme egy példa a beállítható értékekre:

  1. Access-Control-Allow-Origin : * : Bármely eredetet engedélyez.
  2. Access-Control-Allow-Origin : //mysite.com : Csak a mysite.com webhelyről érkező kéréseket engedélyezheti.

Lásd működés közben

Nézzünk meg egy példát. Ezt a kódot megnézheti a GitHub repo-n.

Felépítünk egy szervert az A eredetre, //localhost:8000amely Hellos karakterláncot küld egy apivégpontnak. Ezzel a végponttal fogunk hívni egy kliens létrehozásával a B eredeten //localhost:3000, majd a Fetch használatával kérni az erőforrást. Várhatóan látni fogjuk Helloaz A eredet által átadott karakterláncot a B származási böngésző konzolján.

Tegyük fel, //localhost:8000hogy van egy eredetünk , amely ezt az erőforrást szolgálja a /apivégponton. A szerver választ küld a fejléccel 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}`));

Az ügyfél oldalon ezt a végpontot az alábbiak szerint hívhatja meg fetch:

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

Most nyissa meg a böngésző konzolját az eredmény megtekintéséhez.

Mivel a fejléc jelenleg úgy van beállítva, hogy csak innen engedélyezze a hozzáférést //yoursite.com, a böngésző blokkolja az erőforráshoz való hozzáférést, és hibát fog látni a konzolján.

Ennek kijavításához módosítsa a fejléceket erre:

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

Ellenőrizze a böngésző konzolját, és most láthatja a karakterláncot Hello.

További oktatóanyagok és JSBytes érdekel tőlem? Iratkozzon fel a hírlevelemre.