Javascript ReactJS API数据获取CORS错误

几天来，我一直在尝试为实习创建react web应用程序，但我遇到了一个CORS错误。我正在使用最新版本的reactJS，并将其放置在

创建ReactApp

中，下面是获取的代码：

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的url，但是，已确认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).

及

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

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

及

及

另一件事是，我能够在浏览器中打开url，没有任何问题

请帮忙，谢谢

其他信息

我添加CORS设置的原因是因为它会产生CORS错误，所以删除它并不能真正解决问题

接下来，我尝试执行代理设置，但现在它给出了

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

未处理的拒绝（SyntaxError）：JSON中位置0处的意外标记<

根据互联网，这是因为响应不是JSON。然而，当我检查API时，它给出了

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

其他信息

检查响应将产生以下结果

---

{“状态”：200，“总数”：1，“每页”：3，“当前页”：1，“最后一页”：1，“下一页”url:null，“上一页”url:null，“从”：1，“到”：3，“数据”：[{“id”：1，“slug”：“美国”，“姓名”：“美国”，“地址1”：“美国法院”，“地址2”：“美国”，“城市”：“美国”，“州”：“美国”，“邮政编码”：“94545”，“国家代码”：“美国”，“电话号码”：“1000001”，“创建人”：null，“更新人”：null，“创建时间”：“2017-11-10 11:30:50+00”，“更新时间”：“2018-06-28 07:27:55+00”}

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

CORS仅仅是一种客户端浏览器机制，用于保护用户免受恶意AJAX攻击。因此，解决这个问题的一种方法是将您的AJAX请求从React应用程序代理到它自己的web服务器。正如Vincent所建议的那样，

createreact应用程序提供了一种简单的方法：在您的
package.json
文件中，只需点击“proxy”：http://your-company-api-domain“

。有关更多详细信息，请参阅此

---

然后在react应用程序中，您可以使用如下相对URL：

fetch（'/api/endpoints'）

。请注意，相对URL必须与您的公司API相匹配。这将向您的服务器发送请求，然后服务器将请求转发到您的公司API，并将响应返回到您的应用程序。由于请求是以服务器到服务器的方式处理的，而不是浏览器到服务器的方式，因此不会进行CORS检查。因此，您可以删除请求中所有不必要的CORS头。

您是否尝试在

包.json

中设置代理？依赖项上方的某个位置：

“代理”：http://yourAPI“

不要在请求中使用响应头（即，

访问控制允许源站

是一个响应头）-这将不可避免地触发CORS预飞行，服务器可能无法理解-但是，如果服务器不允许CORS，客户端无法直接解决此问题。如果确认API后端中没有CORS设置，则不允许使用CORS。您已经回答了自己的问题！！！如果未启用CORS或api未为JSONP提供服务，则您必须在您控制的服务器或第三方服务上使用代理。即使我删除了CORS设置，它仍会引发CORS错误。首先，它是在遇到CORS错误后才放置在那里的。首先，我将尝试代理设置Hello，我添加了代理设置，CORS错误确实消失了，但出现了一个新错误“Unhandled Rejection（SyntaxError）：意外标记<在JSON中的位置0'@最后，这意味着您绕过了CORS。但响应不是有效的JSON。请注意，响应中有“抱歉打断，但可能是代理服务器用

404

响应。如果代理服务器用404响应会发生什么情况？”已发布响应

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

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