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

Я использую API выборки 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)
});

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

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

Ответ 1

Как сказал epascarello, сервер, на котором размещен ресурс, должен иметь 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)  
});

Ответ 2

Мой внешний код запущен в http://localhost:3000, а мой API (внутренний код) работает в http://localhost:5000

Использовал API выборки для вызова API. Изначально это была ошибка "cors". Затем добавил этот код ниже в код моего 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.

Ответ 3

Я знаю, что это старый пост, но я обнаружил, что для исправления этой ошибки мне понадобилось использовать 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)
});

Ответ 4

Если вы используете 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;
    }

Ответ 5

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

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!