Как исправить проблему CORS в Fetch API

Я создаю базовое приложение Weather только для внешнего интерфейса, используя reactjs. Для запросов API я использую Fetch API. В моем приложении я получаю текущее местоположение из простого API, которое я нашел, и оно дает местоположение как объект JSON. Но когда я запрашиваю его через Fetch API, я получаю эту ошибку.

Failed to load http://ip-api.com/json: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

Поэтому я просмотрел и нашел несколько решений, чтобы исправить это.

  1. Включение CORS в Chrome устраняет ошибку, но когда я развертываю приложение на героку, как я могу получить к нему доступ через мобильное устройство, не сталкиваясь с той же проблемой CORS.
  2. Я нашел прокси-API, который разрешает запросы CORS. Но поскольку это запрос местоположения, это дает мне местоположение прокси-сервера. Так что это не решение.
  3. Я прошел через это Вопрос Stackoverflow и добавил заголовки в заголовок моего http-запроса, но это не решает проблему. (Все равно выдает ту же ошибку).

Итак, как я могу решить проблему навсегда? Какое лучшее решение я могу использовать для решения проблемы CORS для http-запросов в Fetch API?


reactjs http javascript cors fetch-api
person Thidasa Pankaja    schedule 11.02.2018    source источник
comment
этот сервер настроен так, чтобы запретить вам получать его из браузера (CORS). Вы можете получить его весь день с помощью cURL. Если вы не можете заставить их добавить заголовок CORS на свой веб-сервер, пересмотрите свою идею.   -  person Ronnie Royston    schedule 11.02.2018

Ответы (3)


arrow_upward
2
arrow_downward

Этот API кажется разрешающим, отвечая Access-Control-Allow-Origin:*

Я не понял, в чем причина вашей проблемы, но я не думаю, что это просто fetch API .

Это отлично работало для меня как в Firefox, так и в Chrome...

fetch('http://ip-api.com/json')
   .then( response => response.json() )
   .then( data => console.log(data) )
person Brent Bradburn    schedule 11.02.2018
comment
Я добавил заголовок Access-Control-Allow-Origin:* в запрос Fetch API. Но это не решает проблему. Это работает только тогда, когда я включаю CORS в браузере с помощью плагина. - person Thidasa Pankaja; 11.02.2018
comment
Кажется, я что-то упускаю, но вам не следует добавлять Access-Control-Allow-Origin:* к вашему запросу — сервер API помещает это в свой ответ. Что они и делают, согласно моему тесту. - person Brent Bradburn; 11.02.2018
comment
Прочитав о добавлении заголовков и многом другом, я добавил заголовки в свой запрос. И я заменил весь запрос API выборки на то, что вы упомянули, и это работает. Большое спасибо - person Thidasa Pankaja; 11.02.2018
comment
У меня это сработало с такими аргументами: fetch('http://ip-api.com/json', { method: "GET", mode: 'cors', headers: { 'Content-Type': 'application/json',}}).then(response => response.json()) Спасибо Нафиу Лаваль. - person mndv; 10.05.2021

arrow_upward
2
arrow_downward

Вы должны использовать прокси-решение, но передать ему IP-адрес клиента вместо прокси-сервера. Вот пример формата URL-адреса для указанного вами API с использованием IP-адреса WikiMedia:

http://ip-api.com/json/208.80.152.201

person Tallboy    schedule 11.02.2018
comment
Это работает. Но жесткое кодирование IP-адреса, так как это будет проблемой, когда я войду с другого IP-адреса, верно? Итак, как я могу получить IP-адрес клиента, поскольку IP-адрес находится в объекте ответа. Итак, как я могу получить IP-адрес перед отправкой запроса (чтобы прикрепить запрос, как вы упомянули)? - person Thidasa Pankaja; 11.02.2018
comment
Чтобы сделать прокси, вам нужен код на стороне сервера (например, PHP, ruby ​​и т. д.). Вы просто посмотрите на IP-адрес входящего запроса, используете его в URL-адресе, получите ответ (все еще на PHP), получите ЭТОТ ответ, а затем отправьте его в фактический браузер (так что браузер не тот, кто делает запрос) . Это позволит обойти ограничения CORS, поскольку файл размещается в вашем собственном домене, и CORS больше не применяется. - person Tallboy; 11.02.2018
comment
Вы не сможете сделать это только в JS, если не используете JSONP, похоже, они его поддерживают: ip-api.com/docs/api:json - person Tallboy; 11.02.2018
comment
Спасибо. Я посмотрю на это. Кстати, похоже, это была проблема с заголовками в моем запросе. Исправил это, заменив простой код, который упомянул другой парень, и он работает как шарм. - person Thidasa Pankaja; 11.02.2018

arrow_upward
2
arrow_downward

если вы делаете запрос на публикацию, размещение или исправление, вы должны привести свои данные в строку с помощью body: JSON.stringify(data)

fetch(URL, 
        {
            method: "POST", 
            body: JSON.stringify(data),
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
            }
        }
    ).then(response => response.json())
    .then(data => {
        ....
    })
    .catch((err) => {
        ....
        })
    });
person Nafiu Lawal    schedule 09.04.2021