【问题标题】：Access-control-allow-origin when using api使用 api 时的访问控制允许来源
【发布时间】：2016-11-23 01:53:18
【问题描述】：

一直在寻找解决这个问题的方法：

Fetch API 无法加载 https://api.wunderground.com/api/******/conditions/q/toronto。 “Access-Control-Allow-Origin”标头的值“http://www.wunderground.com”不等于提供的原点。因此，Origin 'http://localhost:3000' 不允许访问。让服务器发送带有有效值的标头，或者，如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

const apiKey = '******'
const apiUrl = 'https://api.wunderground.com/api/' + apiKey + '/conditions/q/'

var WeatherApi = {
  get: function(query) {
    return fetch(apiUrl + query).then(function(response) {
      return response.json();
    });
  }
};

  handleClick: function() {
    WeatherApi.get(this.state.text).then(function(data) {
      console.log(data);
    }.bind(this));
  },

那么我如何让服务器发送带有有效值的标头？

【问题讨论】：

见stackoverflow.com/questions/10518913/…
专门设置为wunderground.com 只允许该域，你确定它是公共api吗？
我确定它是一个公共 api。我从他们的文档中得到了网址：wunderground.com/weather/api/d/docs
@matmo，当我尝试链接中的代码时遇到同样的错误。
谷歌搜索 CORS。这是一种痛苦。如果您在 chrome 中执行此操作，则预检请求必须返回 200。解决方法是使用您自己的服务器使用 curl 或其他方式获取数据

标签： javascript reactjs cors wunderground

【解决方案1】：

这些“CORS”请求由浏览器发送到服务器的 OPTIONS 动词以及允许跨域请求的服务器处理。虽然，根据 API，您可以通过 CORS 限制，但请记住浏览器在抱怨，如果您可以在服务器端进行相同的调用，您将不会遇到问题（至少在浏览器级别，API 可能仍然需要某些标题）。

如果您必须从浏览器执行此操作，那么您必须遵循严格的准则，您的消费 API 也必须支持以允许访问。下面的 RFC 描述了整个 OPTIONS 动词协议（在 RFC 中称为 pre-flight），您始终可以在 Chrome 开发人员中看到这些协议。工具并使用它们来调试问题。

您的 API 很可能需要一些令牌，或者您未提供的 dev.(localhost issue) 标头。

这是 RFC 链接。第 5.x 节是您想要的珍宝，因此请务必阅读本节的所有内容...

https://www.w3.org/TR/cors/#syntax

希望对你有帮助

编辑 1

在您的本地开发盒中，在 IIS 或 apache 中，确保提供“响应标头”

Access-Control-Allow-Origin ---> "https://api.wunderground.com"

【讨论】：

他不控制 API 所在的服务器，仅供参考。