Как решить проблему с «CORS policy» при работе с API?

Question

[OstapO]

Есть Laravel проект на локалке (XAMPP), делаю GET запрос к стороннему API
следующим кодом:

const headers = new Headers({
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "*",
      "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With",
      'Access-Control-Allow-Credentials': true,
      'Access-Control-Max-Age': '86400',
      'Content-Type': 'application / json; charset=utf8',
      'id': id,
      'token': token
    })
fetch(url, { headers: headers })
      .then(response => response.json())
      .then(data => {
        console.log(data)
      })
      .catch(error => console.error(error))

Результат запроса:

Comments

[Алексей Ярков]

Заголовки Access-Control-Allow-* надо не отправлять, а возвращать

Answer 1

[DanKud]

Пишите скрипт с запросом к API на PHP и обращайтесь к нему через AJAX.

Comments

[OstapO]

DanKud , использовать Guzzle ?

[DanKud]

OstapO, как правило для запросов к API достаточно дефолтного file_get_contents()

Answer 2

[irishmann]

Насколько я понял Access-Control-Allow-Origin через JS мало что решает, поэтому я воспользовался CORS Proxy.

$.ajax({
  type:'POST',
  url: 'https://cors-anywhere.herokuapp.com/http://someproject.ru/api/',
  'data': { 
    query: '{"ask":"'+message+'","userid":'+id+',"key":"1"}'
  },
  'success': function(data){
    msg = JSON.parse(data);
    $(".messages").append('<li><div class="text-msg receive_msg">'+msg['aiml']+'</div></li>');
    while($(".messages li").length > 7){
      $('li:first').detach();
    }
  }
});

Answer 3

[Иван Шумов]

В стопятсотый раз. Cors это механизм безопасности против клиентских запросов браузера. Либо вам владелец API разрешает доступ, либо вам писать серверную обёртку. В противном случае браузер вас не позволит