Question

我正在调用Dark Sky API：

axios({
      url: 'https://api.darksky.net/forecast/[my key]/37.8267,-122.4233',
      timeout: 20000,
      method: 'get',
      responseType: 'json'
    })
    .then(function(r) {
      console.log(r);
    })
    .catch(function(r){
      console.log(r);
    });

我收到了这个错误：

XMLHttpRequest无法加载https://api.darksky.net/forecast/[my密钥] /37.8267,-122.4233。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:3000”访问。

我尝试在调用中添加config作为第二个参数，并将config设置为：

var config = {
    headers: {'Access-Control-Allow-Origin': '*'}
};

但是，我很确定必须在服务器端完成？还试图做出回复jsonp，看看是否能解决问题，但仍然没有。我也尝试使用fetch() API，但这也不起作用。

如果它有任何区别，我会在React应用程序中进行此调用。我怎样才能获得JSON并继续我的项目？

Answer 1

试用JSONP。不如CORS安全但功能强大：

            $.get( weatherAPI, function( weather ) {
                console.log(weather);
            }, 'jsonp');

Answer 2

显然，DarkSky.net确实有意地应用这个跨域策略来拯救你 - 开发人员有些钱： https://darksky.net/dev/docs/faq#cross-origin

我们在Dark Sky非常重视安全。作为安全预防措施，我们在服务器上禁用了跨源资源共享（CORS）。

您的API调用包含您的秘密API密钥作为请求的一部分。如果您要从面向客户端的代码进行API调用，则任何人都可以提取并使用您的API密钥，这将导致您必须支付的帐单。我们禁用CORS以帮助保密您的API密钥。

要防止API密钥滥用，您应该设置代理服务器以在后台调用我们的API。然后，您可以在不泄露API密钥的情况下为您的客户提供预测。

所以，看起来，要做的就是选择PHP脚本或其他形式的服务器端代理服务。

axios GET导致请求的资源上出现“No'Access-Control-Allow-Origin'标头。”

2 个答案: