Juurdepääsukontroll-lubamise-päritolu päis - CORS-i näide

Sageli võite API-le helistades oma konsoolis näha järgmist viga:

 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 

Selles postituses õpime, miks see viga juhtub ja kuidas saate seda parandada.

Mis on Access-Control-Allow-Originpäis?

Access-Control-Allow-Originon CORS-i päis. CORS ehk rist päritolu ressursside jagamine on brauserite mehhanism, mis võimaldab brauseritel saidil, mis töötab alguspunktis A, taotleda ressursse päritolult B.

Päritolu pole lihtsalt hostinimi, vaid pordi, hostinime ja skeemi kombinatsioon, näiteks - //mysite.example.com:8080/

Siin on näide selle kohta, kus see toimib -

  1. Mul on päritolu A: //mysite.comja ma tahan saada vahendeid päritolu B: //yoursite.com.
  2. Teie turvalisuse kaitsmiseks ei luba brauser mul pääseda juurde teie saidi.com ressurssidele ja blokeerib minu taotluse.
  3. Selleks, et võimaldada päritolul A juurdepääsu teie ressurssidele, peab teie päritolu B andma brauserile teada, et mul on okei hankida teie päritolust ressursse.

Siin on näide Mozilla arendajavõrgustikust, mis selgitab seda tõesti hästi:

CORS-i abiga võimaldavad brauserid päritolul ressursse omavahel jagada.

On üksikuid päiseid, mis võimaldavad ressursse jagada päritolu lõikes, kuid peamine neist on Access-Control-Allow-Origin. See ütleb brauserile, mis päritolul on lubatud sellelt serverilt päringuid vastu võtta.

Kes peab sättima Access-Control-Allow-Origin?

Mõistamaks, kes peab selle päise määrama, kaaluge järgmist stsenaariumi: sirvite veebisaiti, mida kasutatakse lugude vaatamiseks ja kuulamiseks. Veebisait üritab pahatahtlikult ühendust teie taustal asuva pangaga luua.

Nii et kellel on ülim võimalus takistada pahatahtlikku veebisaiti teie pangast andmete varastamisel? Pank! Seega peab pank kaitsma oma ressursse, seades Access-Control-Allow-Originvastuse osana päise.

Pidage lihtsalt meeles: ressursside teenindamise eest vastutav päritolu peab selle päise määrama.

Kuidas seda päist kasutada ja millal edastada

Siin on näide väärtustest, mida saate määrata:

  1. Access-Control-Allow-Origin : * : Lubab mis tahes päritolu.
  2. Access-Control-Allow-Origin : //mysite.com : Lubage taotlusi ainult saidilt mysite.com.

Vaadake seda tegevuses

Vaatame ühte näidet. Selle koodi saate vaadata minu GitHubi repost.

Ehitame alguspunktile A serveri, //localhost:8000mis saadab lõpp- Hellopunktile stringide s api. Selle lõpp-punktiga helistame, luues kliendi alguspunktis B //localhost:3000ja seejärel ressursi taotlemiseks fetchi. Eeldame, et Hellopäritolu A poolt edastatud string on pärit brauseri konsoolist B.

Oletame, et meil on alguspunkt, //localhost:8000mis teenib seda ressurssi /apilõpp-punktis. Server saadab vastuse koos päisega 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}`)); 

Kliendi poolel saate sellele lõpp-punktile helistada fetchjärgmiselt:

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

Nüüd avage tulemuse nägemiseks brauseri konsool.

Kuna päis on praegu seatud lubama juurdepääsu ainult aadressilt //yoursite.com, blokeerib brauser ressursile juurdepääsu ja näete oma konsoolis viga.

Selle parandamiseks muutke päised sellele:

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

Kontrollige oma brauseri konsooli ja nüüd näete stringi Hello.

Kas olete huvitatud minu käest veel õpetustest ja JSBytes-ist? Registreeru minu uudiskirja saamiseks.