Ошибка CORS при использовании fetch API - React create app

Я использую API с помощью выборки, но получаю ошибку 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/", но я не думаю, что мне следует использовать это для производственной среды.

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


reactjs javascript cors fetch-api
person Victor Bello    schedule 09.05.2019    source источник
comment
Почему вы говорите, что получаете ошибку CORS? ... По-видимому, ошибка связана с тем, что конечная точка, на которую вы нацелены, не поддерживает этот метод. Можете попробовать использовать для отладки клиент отдыха?   -  person Carlos Alves Jorge    schedule 10.05.2019
comment
Я отредактировал свой вопрос, добавив журнал хромированной консоли. Используя почтальон или мыло, он работает   -  person Victor Bello    schedule 10.05.2019
comment
API не отвечает на запросы OPTIONS (также известные как предполетные испытания). Чтобы избежать предполетных испытаний, не устанавливайте пользовательские заголовки.   -  person Kevin B    schedule 10.05.2019
comment
... и используйте только запрос GET ... Я считаю, что когда вы отправляете body, нет возможности пользователю GET   -  person skyboyer    schedule 10.05.2019
comment
POST может быть отправлен без предварительной проверки, если тип содержимого оставлен по умолчанию, дополнительные заголовки не установлены и with-credentials не используется. Просто удалите headers и отправьте данные в виде строки параметров вместо json. Если сервер не поддерживает это, вам придется использовать свой собственный сервер для отправки запроса.   -  person Kevin B    schedule 10.05.2019
comment
@KevinB, я видел этот вариант в поисках решения. Проблема в том, что конечная точка ожидает, что тип содержимого будет application/json   -  person Victor Bello    schedule 10.05.2019
comment
Думаю, тебе просто не повезло.   -  person Kevin B    schedule 10.05.2019
comment
Установка заголовка Access-Control-Allow-Origin в вашем запросе не имеет смысла ... это заголовок, который сервер устанавливает, чтобы указать, разрешен ли вам доступ к URL-адресу через междоменный запрос или нет. Это важная часть безопасности CORS. Если бы инициатор запроса мог установить в заголовке все, что он хотел, то, очевидно, это не обеспечило бы никакой безопасности.   -  person ADyson    schedule 10.05.2019
comment
И если сервер не разрешает запросы CORS из вашего домена, вы мало что можете с этим поделать, кроме как спросить у обслуживающего персонала сервера, изменят ли они свой код, чтобы разрешить это. Или у некоторых более крупных поставщиков есть процесс, в котором вы можете зарегистрировать свой сайт в качестве доверенного клиента, которому затем разрешено делать междоменные запросы к этому API.   -  person ADyson    schedule 10.05.2019

Ответы (2)


arrow_upward
5
arrow_downward

Обновите код, как показано ниже (используйте 'mode' со значением 'no-cors'):

Для получения дополнительной информации перейдите по ссылке => https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

export const execPOST = (url, body) => {
    return fetch(url, {
    mode:'no-cors'
    method: "POST",
    headers: {
      "Content-Type": "application/json"
   },
    body: JSON.stringify(body)
  });
};
person Vibhas    schedule 31.07.2019

arrow_upward
2
arrow_downward

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

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

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

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

person braza    schedule 09.05.2019
comment
This means that you cannot disable it from the client side Могу я предложить изменить эту строку, чтобы она говорила "включить" или "отключить". - person ; 10.05.2019
comment
If you don't have access to the API to change the headers then you won't be able to use the api. Это не совсем так; CORS применяется только к запросам браузера. Конечная точка проксирующего API на хост-сервере не связана правилами CORS. - person ; 10.05.2019
comment
Спасибо @Amy, я обновил его, чтобы упомянуть клиентскую сторону - person braza; 10.05.2019
comment
Спасибо за ваш ответ. Как я писал в своем вопросе, сервер уже возвращает Access-Control-Allow-Origin. Разве этого недостаточно для работы клиентского запроса? - person Victor Bello; 10.05.2019
comment
Сервер @VictorBello отвечает. Я не понимаю запрос OPTIONS, который ваш браузер отправил мне для выполнения проверки CORS. Не имеет значения, есть ли Access-Control-Allow-Origin заголовок или нет, если статус не 200 OK - person skyboyer; 10.05.2019
comment
Судя по сообщению об ошибке, вероятно, что сервер не реализовал ответ на предварительный запрос OPTIONS, что означает, что вы получите недопустимый метод и ошибку CORS. В любом случае это не то, что вы можете исправить, если не можете внести изменения в сервер. Вам нужно будет реализовать серверное решение для прокси-запросов к API. - person braza; 10.05.2019