由于来自本地主机的 CORS 问题，请求失败

Posted 2023-02-27

【中文标题】由于来自本地主机的 CORS 问题，请求失败

【英文标题】：Request fails due to CORS issue with origin from localhost

【发布时间】：2018-08-03 23:40:41

【问题描述】：

我在 SO 和不同的博客上看到了几十个问题，用“答案”谈论这个问题——都无济于事。

我的本​​地机器 (Ubuntu 16.04) 上有一个 React.js 应用程序。在本地，我尝试通过运行npm start 来测试它，它会打开浏览器到http://localhost:3000。

在一页上，我试图访问我的共享托管服务器上的 php api。

Chrome 和 Firefox 都表示由于服务器没有 Access-Control-Allow-Orgin 而失败。

确切消息：

Failed to load http://---/api/v1/categories: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost.com:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
localhost.com/:1 Uncaught (in promise) TypeError: Failed to fetch

但是，在我的 php 服务器入口点上，我确实有：

header("Access-Control-Allow-Orgin: *");
header("Access-Control-Allow-Methods: *");

这是我在我的 react 应用中调用 api 的地方：

 componentDidMount() 

  var options = 
    method: 'get',
    headers: 
        "Access-Control-Request-Headers": "*",
        "Access-Control-Request-Method": "*"
    ,
  

  // I have since removed the headers from the options as advised in the comments 
  fetch('http://---/api/v1/categories', options)
  .then(results => 
    return results.json();
  ).then(data => 
    let categories = data.map((category) => 
      return(
        // edited out
      )
    )
    this.setState(categories: categories);
  )
 

我在 Chrome 和 Firefox 上都试过了；我还尝试将我的服务器别名为远离本地主机。我已经尝试过no-cors 方法，它确实让我可以访问——但当然会破坏一切。我已经尝试过在我的fetch 请求中传递和不传递标头。

更新：

我确实通过安装this Chrome plugin 让它工作。我觉得这是一种解决方法，想知道这里是否有编码答案。

【问题讨论】：

Access-Control-Allow-Orgin - 试试 Access-Control-Allow-Origin，可以吗？

Access-Control-Request-Headers 和 Access-Control-Request-Method 都不允许使用 * 通配符值。第一个需要是请求将使用的实际请求标头列表，第二个必须指定 one 请求方法。但是您在这里发出普通的 GET 请求，甚至没有发送凭据 - 那么您首先设置这些标头是为了什么？它们适用于需要 pre-flight 请求的情况——普通的 GET 不需要。

@CBroe 好的，所以我删除了请求中的标头（如问题中所述），它仍然不起作用。所以这本身不是问题。但仍然需要了解一些很好的信息，谢谢。

请引用确切的错误信息。

@CBroe 添加了消息；有两个，不确定第二个是否相关。

【参考方案1】：

我是个白痴。

Origin 拼写错误为Orgin。

这个错字在我的项目中已经存在了将近三年。这是我第一次需要使用跨域访问。

【参考方案2】：

header("Access-Control-Allow-Methods: *");

应该是：

header("Access-Control-Allow-Methods: GET, POST, HEAD, OPTIONS, PUT, DELETE, PATCH");

...以及您打算接受的任何其他方法。