Question

我在SO上看到过几十个问题，不同的博客用“答案”来讨论这个问题 - 一切都无济于事。

我的本地计算机上有一个React.js应用程序（Ubuntu 16.04）。在本地，我尝试通过运行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: *");

这是我在我的反应应用程序中进行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上试过这个;我也尝试将我的服务器别名为localhost。我尝试了no-cors方法，这让我可以访问 - 但当然会打破一切。我已尝试使用和不传递标题以及fetch请求。

更新：

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

Answer 1

我是个白痴。

Origin拼错为Orgin。

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

Answer 2

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

应该是：

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

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

由于来自localhost的来源的CORS问题，请求失败

2 个答案: