Грешка в CORS при използване на API за извличане - React създаде приложение

Консумирам 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/", но не мисля, че трябва да го използвам за производствена среда.

Намерих много материали за този проблем, но нищо, което да работи, освен прилагането на бекенд, за да направи заявката или да използва нещо друго като прокси, за да направи заявката и така нататък...


reactjs javascript cors fetch-api
person Victor Bello    schedule 09.05.2019    source източник
comment
Какво ви кара да кажете, че получавате CORS грешка?... Очевидно грешката е, защото крайната точка, към която сте се насочили, не позволява метода. Можете ли да опитате да използвате клиент за почивка за отстраняване на грешки?   -  person Carlos Alves Jorge    schedule 10.05.2019
comment
Редактирах въпроса си, като добавих регистрационен файл на конзолата на Chrome. Използвайки пощальон или сапуи, работи   -  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 може да бъде изпратен без предварителна проверка, ако content-type е оставен по подразбиране, не са зададени допълнителни заглавки и не се използват 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