Ошибка CORS при использовании API выборки - приложение React create - PullRequest
0 голосов
/ 10 мая 2019

Я использую API, используя fetch, но получаю ошибку CORS. Я пробовал несколько заголовков, но я не понимаю, в чем проблема.

Я не владелец API, поэтому я не мог его изменить, но, проверяя ответ, он возвращает access-control-allow-origin.

Мой метод запроса:

export const execPOST = (url, body) => {
  return fetch(url, {
    method: "POST",
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(body)
  });
};

Ответ:

Request URL: http://api
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
Remote Address: ip
Referrer Policy: no-referrer-when-downgrade
Response Headers:
Access-Control-Allow-Origin: *

Разве этого ответа недостаточно, чтобы удовлетворить мой запрос?

ошибка консоли:

ОПЦИИ http://api net :: ERR_ABORTED 405 (метод не разрешен) Доступ к выборке в 'http://api' из источника 'http://localhost:3000' был заблокирован политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: не имеет HTTP-статуса ok.

Я получил эту работу (в то время как я разрабатываю), используя "https://cors-anywhere.herokuapp.com/", но я не думаю, что я должен использовать это для производственной среды.

Я нашел много материала об этой проблеме, но ничего, что не работало, кроме реализации бэкэнда для выполнения запроса или использования чего-то другого в качестве прокси для выполнения запроса и т. Д. *

1 Ответ

2 голосов
/ 10 мая 2019

Заголовки CORS устанавливаются API для защиты пользователей от вредоносного кода, отправляющего запросы на сайты от их имени.

Это означает, что вы не можете включить или отключить его на стороне клиента, поскольку заголовок Access-Control-Allow-Origin является заголовком только на стороне сервера.

Если у вас нет доступа к API для изменения заголовков, вы не сможете использовать API со стороны клиента.

В процессе работы вам придется создать собственный API, который будет обрабатывать запросы к API, с которым вы пытаетесь связаться.

...