ReactJS API数据获取CORS错误

Question

几天以来，我一直在为我的实习机会创建一个React Web应用程序，但是遇到了CORS错误。我正在使用最新版本的reactJS，并将其放在中create- react-app，以下是用于获取的代码：

componentDidMount() {
  fetch('--------------------------------------------',{
    method: "GET",
    headers: {
      "access-control-allow-origin" : "*",
      "Content-type": "application/json; charset=UTF-8"
    }})
  .then(results => results.json())
  .then(info => {
    const results = info.data.map(x => {
      return {
        id: x.id,
        slug: x.slug,
        name: x.name,
        address_1: x.address_1,
        address_2: x.address_2,
        city: x.city,
        state: x.state,
        postal_code: x.postal_code,
        country_code: x.country_code,
        phone_number: x.phone_number,
      }
    })
    this.setState({warehouses: results, lastPage: info.last_page});
  })
  .then(console.log(this.state.warehouses))
 }

抱歉，由于公司规定，我无法发布该API的网址，但是，可以确认该API后端中没有CORS设置。

但是，在mozilla上运行时遇到以下错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ------------------. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

和

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ---------------------------------------------. (Reason: CORS request did not succeed).

如果在chrome上运行，则会出现以下错误

Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

和

Failed to load --------------------------------------------------------: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

和

Uncaught (in promise) TypeError: Failed to fetch

另一件事是，我可以在浏览器中打开URL，没有任何问题。

请帮忙，谢谢！

附加信息

我添加CORS设置的原因是因为它提供了CORS错误，因此删除它并不能真正解决问题。

接下来，我尝试执行代理设置，但是现在

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

根据互联网，这是由于响应不是JSON引起的。但是，当我检查API时，它给出了

API img

这意味着返回类型应该是JSON吗？

附加信息

检查响应将产生此

{“状态”：200，“总计”：1，“每页”：3，“当前页”：1，“最后一页”：1，“下一页网址”：空，“上一页网址”：空，“来自”：1，” to“：3，”
data“：[{” id“：1，” slug“：” america“，” name“：” america“，” address_1“：” USA
Court“，” address_2“：” USA“， “ city”：“ USA”，“ state”：“ USA”，“ postal_code”：“
94545”，“ country_code”：“ US”，“ phone_number”：“ 10000001”，“ created_by”：null，“
updated_by”： null，“ created_at”：“ 2017-11-10 11：30：50 + 00”，“ updated_at”：“
2018-06-28 07：27：55 + 00”}]}

Answer 1

需要在API中设置CORS设置，以允许从您的React应用程序域进行访问。 没有CORS设置，没有来自不同域的AJAX
。就这么简单。您可以将CORS设置添加到公司API中（这种情况不太可能发生），也可以按照以下说明解决：

CORS只是客户端浏览器保护用户免受恶意AJAX侵害的一种机制。因此，解决此问题的一种方法是将您的AJAX请求从React应用代理到其自己的Web服务器。正如文森特（Vincent）所建议的那样，这create- react-app提供了一种简便的方法：在您的package.json文件中，只需chuck即可"proxy": "http://your- company-api-domain"。有关更多详细信息，请参见此链接

然后，在您的react应用中，您可以使用如下相对网址：fetch('/api/endpoints')。注意，相对URL必须与您的公司API匹配。这会将请求发送到您的服务器，然后服务器将请求转发到您的公司API，并将响应返回给您的应用。由于请求是通过服务器到服务器的方式而不是浏览器到服务器的方式处理的，因此不会发生CORS检查。因此，您可以摆脱请求中所有不必要的CORS标头。