编辑1

Question

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

Fetch API无法加载https://api.wunderground.com/api/ ****** / conditions / q / toronto。＆＃39; Access-Control-Allow-Origin＆＃39;标头的值为＆＃39; http://www.wunderground.com＆＃39;这不等于提供的原产地。起源＆＃39; http://localhost:3000＆＃39;因此不允许访问。让服务器发送带有效值的标头，或者，如果不透明的响应符合您的需要，请将请求的模式设置为“无人”状态＆＃39;在禁用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));
  },

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

Answer 1

这些“CORS”请求使用浏览器，服务器和允许跨源请求的服务器发送的OPTIONS谓词。虽然，根据API，您可以通过CORS限制，请记住浏览器正在抱怨，如果您可以使用相同的呼叫服务器端，则不会出现问题（至少在浏览器级别，API可能仍然需要某些标题）。

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

您的API很可能需要一些令牌或可能是您未提供的dev。（localhost问题）标头。

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

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

希望有所帮助

编辑1

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

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

使用api

1 个答案:

编辑1