Adgangskontrol-tillad oprindelsesoverskrift forklaret - med et CORS-eksempel

Ofte når du ringer til en API, kan du muligvis se en fejl i din konsol, der ser sådan ud:

 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 

I dette indlæg vil vi lære, hvorfor denne fejl opstår, og hvordan du kan løse det.

Hvad er Access-Control-Allow-Originoverskriften?

Access-Control-Allow-Originer en CORS header. CORS, eller Cross Origin Resource Sharing, er en mekanisme, der gør det muligt for browsere at lade et websted, der kører ved oprindelse A, anmode om ressourcer fra oprindelse B.

Oprindelse er ikke kun værtsnavnet, men en kombination af port, værtsnavn og skema, såsom - //mysite.example.com:8080/

Her er et eksempel på, hvor dette kommer til handling -

  1. Jeg har en oprindelse A: //mysite.comog jeg ønsker at få ressourcer fra oprindelse B: //yoursite.com.
  2. For at beskytte din sikkerhed vil browseren ikke lade mig få adgang til ressourcer fra yoursite.com og blokerer min anmodning.
  3. For at give oprindelse A adgang til dine ressourcer, skal din oprindelse B fortælle browseren, at det er okay for mig at få ressourcer fra din oprindelse.

Her er et eksempel fra Mozilla Developer Network, der forklarer dette rigtig godt:

Ved hjælp af CORS tillader browsere oprindelser at dele ressourcer mellem hinanden.

Der er et par overskrifter, der tillader deling af ressourcer på tværs af oprindelse, men den vigtigste er Access-Control-Allow-Origin. Dette fortæller browseren, hvilken oprindelse der er tilladt at modtage anmodninger fra denne server.

Hvem skal sætte Access-Control-Allow-Origin?

For at forstå, hvem der skal indstille denne overskrift, skal du overveje dette scenarie: Du gennemser et websted, der bruges til at se og lytte til sange. Hjemmesiden forsøger at oprette forbindelse til din bank i baggrunden skadeligt.

Så hvem har den ultimative evne til at forhindre, at dette ondsindede websted stjæler dine data fra banken? Banken! Så banken skal beskytte sine ressourcer ved at indstille Access-Control-Allow-Originoverskriften som en del af svaret.

Husk bare: oprindelsen, der er ansvarlig for at betjene ressourcer, skal indstille denne overskrift.

Hvordan man bruger, og hvornår man skal overføre dette overskrift

Her er et eksempel på værdier, du kan indstille:

  1. Access-Control-Allow-Origin : * : Tillader enhver oprindelse.
  2. Access-Control-Allow-Origin : //mysite.com : Tillad kun anmodninger fra mysite.com.

Se det i aktion

Lad os se på et eksempel. Du kan tjekke denne kode på min GitHub repo.

Vi skal bygge en server på oprindelse A, //localhost:8000som sender en streng af Hellos til et apislutpunkt. Vi kalder med dette slutpunkt ved at oprette en klient på oprindelse B //localhost:3000og derefter bruge hente til at anmode om ressourcen. Vi forventer at se strengen Hellopasseret af oprindelse A i browserens konsol oprindelse B.

Lad os sige, at vi har en oprindelse, //localhost:8000der tjener denne ressource på /apislutpunktet. Serveren sender et svar med overskriften 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}`)); 

På klientsiden kan du ringe til dette slutpunkt ved at ringe fetchsådan:

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

Åbn nu din browsers konsol for at se resultatet.

Da overskriften i øjeblikket er indstillet til kun at tillade adgang fra //yoursite.com, blokerer browseren adgang til ressourcen, og du vil se en fejl i din konsol.

For at løse dette skal du ændre overskrifterne til dette:

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

Tjek din browsers konsol, og nu kan du se strengen Hello.

Er du interesseret i flere tutorials og JSBytes fra mig? Tilmeld dig mit nyhedsbrev.