Zezwalaj na nagłówek Access-Control-Allow-Origin przy użyciu interfejsu API pobierania HTML5

Używam interfejsu API pobierania HTML5.

var request = new Request('https://davidwalsh.name/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

Mogę używać normalnego json, ale nie mogę pobrać danych z powyższego adresu URL interfejsu API. Wyrzuca błąd:

Fetch API nie może załadować https://davidwalsh.name/demo/arsenal.json . Żądany zasób nie zawiera nagłówka „Access-Control-Allow-Origin”. Dlatego źródło „ http: // localhost ” nie ma dostępu. Jeśli nieprzezroczysta odpowiedź spełnia Twoje potrzeby, ustaw tryb żądania na „brak elementów”, aby pobrać zasób z wyłączonym mechanizmem CORS.

Jak powiedział epascarello, serwer obsługujący zasób musi mieć włączony mechanizm CORS. To, co możesz zrobić po stronie klienta (i prawdopodobnie o czym myślisz), to ustawić tryb pobierania do CORS (chociaż uważam, że jest to ustawienie domyślne):

fetch(request, {mode: 'cors'});

Jednak nadal wymaga to od serwera włączenia mechanizmu CORS i umożliwienia domenie żądania zasobu.

Zapoznaj się z dokumentacją CORS i tym niesamowitym filmem Udacity wyjaśniającym zasady tego samego pochodzenia .

Możesz także użyć trybu bez cors po stronie klienta, ale to po prostu da ci nieprzezroczystą odpowiedź (nie możesz odczytać treści, ale odpowiedź może nadal być buforowana przez Service Worker lub konsumowana przez niektóre API, na przykład <img>) :

fetch(request, {mode: 'no-cors'})
.then(function(response) {
  console.log(response); 
}).catch(function(error) {  
  console.log('Request failed', error)  
});

Mój kod front-endowy działał w http: // localhost: 3000, a moje API (kod zaplecza) działało pod adresem http: // localhost: 5000

Używał interfejsu API pobierania do wywoływania interfejsu API. Początkowo wyrzucał błąd „cors”. Następnie dodałem poniższy kod w moim kodzie interfejsu API zaplecza, umożliwiając pochodzenie i nagłówek z dowolnego miejsca.

let allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Headers', "*");
  next();
}
app.use(allowCrossDomain);

Jednak powinieneś ograniczyć swoje pochodzenie w przypadku innych środowisk, takich jak stage, prod.

To zadziałało dla mnie:

npm install -g local-cors-proxy

Punkt końcowy interfejsu API, którego chcemy zażądać i który ma problemy z CORS:

https://www.yourdomain.com/test/list

Uruchom serwer proxy:

lcp --proxyUrl https://www.yourdomain.com

 Proxy Active 

 Proxy Url: http://www.yourdomain.com:28080
 Proxy Partial: proxy
 PORT: 8010

Następnie w kodzie klienta nowy punkt końcowy interfejsu API:

http://localhost:8010/proxy/test/list

Efektem końcowym będzie żądanie do https://www.yourdomain.ie/test/list bez problemów z CORS!

Wiem, że to starszy post, ale okazało się, że przy naprawieniu tego błędu użyłem adresu IP mojego serwera zamiast nazwy domeny w żądaniu pobierania. Na przykład:

#(original) var request = new Request('https://davidwalsh.name/demo/arsenal.json');
#use IP instead
var request = new Request('https://0.0.0.0/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

Jeśli używasz nginx, spróbuj tego

#Control-Allow-Origin access

    # Authorization headers aren't passed in CORS preflight (OPTIONS) calls. Always return a 200 for options.
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Allow-Origin "https://URL-WHERE-ORIGIN-FROM-HERE " always;
    add_header Access-Control-Allow-Methods "GET,OPTIONS" always;
    add_header Access-Control-Allow-Headers "x-csrf-token,authorization,content-type,accept,origin,x-requested-with,access-control-allow-origin" always;

    if ($request_method = OPTIONS ) {
        return 200;
    }

Spójrz na https://expressjs.com/en/resources/middleware/cors.html Musisz używać cors.

Zainstalować:

$ npm install cors

const cors = require('cors');
app.use(cors());

Musisz umieścić ten kod na swoim serwerze węzłowym.