0

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

Fetch API 无法加载https://api.wunderground.com/api/******/conditions/q/toronto。“Access-Control-Allow-Origin”标头的值“ http://www.wunderground.com ”不等于提供的来源。因此，不允许访问源“ 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));
  },

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

4

1 回答 1

0

这些“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"
于 2016-07-20T02:01:27.573 回答