Реакция делает ax ios get, возвращает ошибку: Политика CORS: На запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin» - PullRequest
Новая
       2

Реакция делает ax ios get, возвращает ошибку: Политика CORS: На запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin»

0 голосов
/ 17 февраля 2020

Я пытаюсь сделать топор ios получить запрос, но получаю ошибочную политику. Я новичок в топоре ios, вот что я попробовал: 

useEffect(() => {
    let url =
      'http://18.189.49.66:3000/api/calculate/' +
      props.type +
      '/' +
      height +
      '/' +
      width;

    var config = {
      headers: { 'Access-Control-Allow-Origin': '*' }
    };

    axios.get(url, config).then(_result => {
      console.log('Duomenys: ' + JSON.stringify(_result));
    });

}, [length, width, height]);

В моем app.js на node.js express у меня есть такие строки: 

var cors = require('cors');
app.use(cors());

И вот ошибка: 

Access to XMLHttpRequest at 'http://18.189.49.66:3000/api/calculate/LF/80/200'
from origin 'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

xhr.js:172 GET http://18.189.49.66:3000/api/calculate/LF/80/200 net::ERR_FAILED dispatchXhrRequest
@ xhr.js:172 xhrAdapter
@ xhr.js:11 dispatchRequest
@ dispatchRequest.js:59 Promise.then (async) request
@ Axios.js:53 Axios.<computed>
@ Axios.js:68 wrap
@ bind.js:9 (anonymous)
@ Calculator.js:113 commitHookEffectList
@ react-dom.development.js:22030 commitPassiveHookEffects
@ react-dom.development.js:22064 callCallback
@ react-dom.development.js:336 invokeGuardedCallbackDev
@ react-dom.development.js:385 invokeGuardedCallback 
@ react-dom.development.js:440 flushPassiveEffectsImpl 
@ react-dom.development.js:25392 unstable_runWithPriority 
@ scheduler.development.js:697 runWithPriority$2 
@ react-dom.development.js:12149 flushPassiveEffects 
@ react-dom.development.js:25361 flushDiscreteUpdates 
@ react-dom.development.js:24359 finishEventHandler 
@ react-dom.development.js:1384 batchedEventUpdates 
@ react-dom.development.js:1418 dispatchEventForPluginEventSystem 
@ react-dom.development.js:5894 attemptToDispatchEvent 
@ react-dom.development.js:6010 dispatchEvent 
@ react-dom.development.js:5914 ListPicker._handleMouseUp createError.js:16 

Uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:81)

Мой бэкэнд:

... var cors = require ('cors'); ... 

app.use(cors());

...

Как мне отредактировать мой запрос?

Ответы [ 4 ]

0 голосов
/ 15 апреля 2020

Для тех, кто изучает React и Ax ios и столкнулся с этой проблемой, вот простое решение, загрузите расширение Chrome, Плагин Allow-Control-Allow-Origin

И включите его ... Увеличить .. Вот оригинальная статья, представляющая ошибку CORS, https://medium.com/@dtkatz / 3 способа исправления ошибки в ядре и как -access-control-allow-origin-works-d97d55946d9 Существует так много ответов с одинаковыми ошибками, но с разными языками бэкэнда, поэтому решения менялись, я пробовал несколько, и ни один не работал, даже добавляя заголовок Access-Control-Allow- Начало файла конфигурации PHP и apache. Надеюсь, это поможет вам продолжить ваш проект.

0 голосов
/ 17 февраля 2020

Чтобы решить эту проблему, вы должны создать прокси-сервер с помощью nodejs и express (или что-то еще, что может помочь в прокси). Если вы используете приложение create-реакции-приложение, вы можете следовать этому руководству:

Запросы прокси-API в разработке

0 голосов
/ 17 февраля 2020

Проблема заключалась в том, что в URL, который я вызывал, буквы были в верхнем регистре, что вызывало ошибку.

0 голосов
/ 17 февраля 2020

Вам необходимо добавить cors в бэкэнд - в основном вы должны будете указать бэкенду URL, с которого вы будете запрашивать через

Я использовал «cors», но я нашел «Доступ к XMLHttpRequest был заблокирован ". Почему?

ИЛИ использовать

https://cors-anywhere.herokuapp.com/

...