如何在 reactjs 中正确设置 barryvdh/laravel-cors答案

【问题标题】：How to properly setup the barryvdh/laravel-cors in reactjs如何在 reactjs 中正确设置 barryvdh/laravel-cors
【发布时间】：2019-05-10 04:52:35
【问题描述】：

我目前是 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 来允许我的 API 中的 cors。我将向你们展示我的前端代码。

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

在我的日志中，我将在这里分享捕获的图像。

【问题讨论】：

不确定这里是否需要它，但是您的 HEAD 中有这个吗？
问题不正确，Laravel 或 barryvdh/laravel-cors 都与您的前端和 facebook api 无关。

标签： reactjs facebook cors axios

【解决方案1】：

如果您清楚地看到，错误就在您的 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 Method Not Allowed 响应状态码表示请求方法被服务器知道但目标资源不支持。

你需要直接访问资源，可能你的axios正在生成Pre Flight Request with OPTIONS header，因为{}被资源本身拒绝了。

您也可以尝试使用简单的 fetch 请求来完成，

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

【讨论】：

与 fetch 和 axios 无关。这是 CORS 的问题。
@KashyapMerai 抱歉，这不是 cors 问题，因为该资源在公共域中可用，并且可以从任何客户端访问，并且 Access-Control-Allow-Origin 标头设置为通配符。 imgur.com/a/Ytsi07V 自己看看。

【解决方案2】：

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 ))

通过代理发出请求将以这种方式工作

CORS 代理会将您的请求转发到https://facebook.github.io/react-native/movies.json
返回来自https://facebook.github.io/react-native/movies.json 的响应，带有Access-Control-Allow-Origin 标头。
现在您的浏览器可以在响应标头中看到 Access-Control-Allow-Origin 标头。

更详细的解释你可以看看这个

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

【讨论】：

Access-Control-Allow-Origin 存在于响应中并设置为全部。