Разрешить заголовок Access-Control-Allow-Origin с использованием HTML5 fetch API

Я использую HTML5 fetch API.

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)
});

Я могу использовать обычный json, но не могу получить данные указанного выше URL-адреса api. Выдает ошибку:

API Fetch не может загрузить https://davidwalsh.name/demo/arsenal.json . На запрошенном ресурсе нет заголовка Access-Control-Allow-Origin. Следовательно, к источнику ' http: // localhost ' доступ запрещен. Если непрозрачный ответ соответствует вашим потребностям, установите режим запроса на 'no-cors', чтобы получить ресурс с отключенным CORS.

Как сказал эпаскарелло, на сервере, на котором размещен ресурс, должен быть включен CORS. То, что вы можете сделать на стороне клиента (и, возможно, то, о чем вы думаете), - это установить режим выборки на CORS (хотя я считаю, что это настройка по умолчанию):

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

Однако для этого по- прежнему требуется, чтобы сервер также включил CORS и разрешил вашему домену запрашивать ресурс.

Ознакомьтесь с документацией CORS и этим потрясающим видео Udacity, объясняющим политику одного и того же происхождения .

Вы также можете использовать режим no-cors на стороне клиента, но это просто даст вам непрозрачный ответ (вы не можете прочитать тело, но ответ все равно может быть кэширован работником службы или потреблен некоторыми API, например <img>) :

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

У меня был интерфейсный код, работающий на http: // localhost: 3000, а мой API (Backend code) работал на http: // localhost: 5000

Использовал API выборки для вызова API. Изначально выкидывал ошибку "корс". Затем добавил этот ниже код в мой код Backend API, разрешив источник и заголовок из любого места.

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

Однако вам следует ограничить ваше происхождение в случае других сред, таких как stage, prod.

Это сработало для меня:

npm install -g local-cors-proxy

Конечная точка API, которую мы хотим запросить, имеет проблемы с CORS:

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

Запустить прокси:

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

 Proxy Active 

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

Затем в вашем клиентском коде новая конечная точка API:

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

Конечным результатом будет запрос на https://www.yourdomain.ie/test/list без проблем с CORS!

Я знаю, что это более старый пост, но я обнаружил, что для исправления этой ошибки у меня сработало использование IP-адреса моего сервера вместо использования доменного имени в моем запросе на выборку. Так например:

#(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)
});

Если вы используете nginx, попробуйте это

#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;
    }

Посмотрите https://expressjs.com/en/resources/middleware/cors.html. Вы должны использовать cors.

Установить:

$ npm install cors

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

Вы должны поместить этот код на свой сервер узла.