De multe ori, când apelați un API, este posibil să vedeți o eroare în consola dvs. care să arate astfel:


Access to fetch at 'http://somesite.com' from origin 'http://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

În această postare, vom afla de ce se întâmplă această eroare și cum o puteți remedia.

Ce este Access-Control-Allow-Origin antet?

Access-Control-Allow-Origin este un antet CORS. CORS sau Sharing Resource Sharing este un mecanism pentru browserele care permit unui site care rulează la originea A să solicite resurse de la originea B.

Originea nu este doar numele gazdei, ci o combinație de port, nume gazdă și schemă, cum ar fi – http://mysite.example.com:8080/

Iată un exemplu de intrare în acțiune –

  1. Am o origine A: http://mysite.com și vreau să obțin resurse de la originea B: http://yoursite.com.
  2. Pentru a vă proteja securitatea, browserul nu mă va permite să accesez resursele de pe site-ul dumneavoastră.com și îmi va bloca solicitarea.
  3. Pentru a permite originii A să vă acceseze resursele, originea dvs. B va trebui să anunțe browserul că este în regulă pentru mine să obțin resurse de la originea dvs.

Iată un exemplu din rețeaua de dezvoltatori Mozilla care explică foarte bine acest lucru:

Antetul Access Control Allow Origin explicat Cu un exemplu CORS

Cu ajutorul CORS, browserele permit originilor să împartă resursele între ele.

Există un câteva anteturi care permit partajarea resurselor între origini, dar cea principală este Access-Control-Allow-Origin. Aceasta îi spune browserului ce origini li se permite să primească cereri de la acest server.

Cine trebuie să stabilească Access-Control-Allow-Origin?

Pentru a înțelege cine trebuie să seteze acest antet, luați în considerare acest scenariu: navigați pe un site web care este utilizat pentru a vizualiza și asculta melodii. Site-ul web încearcă să stabilească o conexiune cu banca dvs. în fundal, cu rea intenție.

Deci, cine are capacitatea supremă de a preveni ca acest site rău intenționat să vă fure datele de la bancă? Banca! Deci, banca va trebui să își protejeze resursele prin stabilirea Access-Control-Allow-Origin antetul ca parte a răspunsului.

Nu uitați: originea responsabilă pentru deservirea resurselor va trebui să seteze acest antet.

Cum se folosește și când se trece acest antet

Iată un exemplu de valori pe care le puteți seta:

  1. Access-Control-Allow-Origin : * : Permite orice origine.
  2. Access-Control-Allow-Origin : http://mysite.com : Permiteți solicitări numai de pe site-ulmeu.ro.

Vedeți-o în acțiune

Să vedem un exemplu. Puteți verifica acest cod în repo-ul meu GitHub.

Vom construi un server pe originea A http://localhost:8000 care va trimite un șir de Hellos la un api punctul final. Vom apela cu acest punct final prin crearea unui client pe originea B http://localhost:3000 și apoi folosiți fetch pentru a solicita resursa. Ne așteptăm să vedem șirul Hello trecut de originea A în consola browserului de origine B.

Să presupunem că avem o origine http://localhost:8000 care servește această resursă pe /api punctul final. Serverul trimite un răspuns cu antetul 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", "https://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}`));

Din partea clientului, puteți apela acest punct final prin apelare fetch asa:

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

Acum deschideți consola browserului pentru a vedea rezultatul.
Deoarece antetul este setat în prezent pentru a permite accesul numai din https://yoursite.com, browserul va bloca accesul la resursă și veți vedea o eroare în consola dvs.

1611607684 843 Antetul Access Control Allow Origin explicat Cu un exemplu CORS

Acum, pentru a remedia acest lucru, schimbați anteturile la acesta:

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

Verificați consola browserului și acum veți putea vedea șirul Hello.

Vă interesează mai multe tutoriale și JSBytes de la mine? Înscrieți-vă la newsletter-ul meu.