Как правильно настроить barryvdh / laravel-cors в реакции - PullRequest
Новая
       13

Как правильно настроить barryvdh / laravel-cors в реакции

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

Я в настоящее время новичок в ReactJS и сталкиваюсь с проблемой получения ответа API, в журнале консоли отображается ошибка этого 

Access to XMLHttpRequest at 'https://facebook.github.io/react-native/movies.json' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

они рекомендуют мне использовать barryvdh/laravel-cors, чтобы разрешить cors в моем API. Ребята, я покажу вам мой код переднего плана. 

componentDidMount() {
    axios.get('https://facebook.github.io/react-native/movies.json',{
    }).then(function(response){
        console.log(response)
    })
}

В своих журналах я поделюсь отснятым изображением.

enter image description here

Ответы [ 2 ]

1 голос
/ 10 мая 2019

Ошибка в самом запросе Axios , если вы четко видите 

axios.get('https://facebook.github.io/react-native/movies.json',{})

У вас есть дополнительный параметр, хотя вы не передаете никаких заголовков или других параметров, есливы удаляете {}, тогда он должен работать. 

axios.get('https://facebook.github.io/react-native/movies.json')

И если вы видите результаты вашего console, вы можете увидеть, где четко указано, что запрос OPTIONS выбрасывает 405 код состояния,

из MDN

Протокол передачи данных по протоколу гипертекста (HTTP) 405 Не разрешен Код состояния ответа указывает, что метод запроса известен серверу, но не поддерживаетсяпо целевому ресурсу.

Вам потребуется прямой доступ к ресурсу, возможно, ваш axios генерирует Pre Flight Request with OPTIONS header из-за {}, который отклоняется самим ресурсом.

Вы также можете попробовать сделать это с помощью простого запроса на выборку, 

fetch('https://facebook.github.io/react-native/movies.json')
  .then(function(response) {
    console.log(response.json())
  })
0 голосов
/ 10 мая 2019

CORS контролируется внутренним API, и в вашем случае у вас нет контроля над ним, который равен https://facebook.github.io/react-native/movies.json.

Браузер не позволяет вашему коду получить доступ к ответу, потому что браузер не видит Access-Control-Allow-Origin в ответе.

Все еще может работать, сделав запрос через прокси, где проксиотправляет соответствующий заголовок CORS от имени вашего запроса. 

const proxy = "https://cors-anywhere.herokuapp.com/";
const url = "https://facebook.github.io/react-native/movies.json"; 
fetch(proxy + url)
  .then(response => response.text())
  .then(contents => console.log(contents))
  .catch(() => console.log("CORS Error" + url ))

Выполнение запроса через прокси будет работать таким образом

  1. Прокси-сервер CORS перенаправит ваш запрос на https://facebook.github.io/react-native/movies.json
  2. Возвращайте ответ от https://facebook.github.io/react-native/movies.json с Access-Control-Allow-Origin заголовками.
  3. Теперь ваш браузер может видеть Access-Control-Allow-Origin заголовки, присутствующие в заголовке ответа.

Для более подробного объяснения вы можете проверитьэто

https://stackoverflow.com/a/43881141/2850383

...