javascript - 使用地理位置和天气 API 显示天气的问题

Question

这个问题已经有答案了:

Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not? (15 个回答)

已关闭 5 年前。

免责声明:
我编辑这篇文章是因为我从不支持 CORS 的 API 切换到另一个 API 后发生了另一个错误。

我目前正在尝试构建一个 app on codepen.io根据用户地理位置的数据显示本地天气。我正在使用this API provided by OpenWeatherMap 。编辑器没有显示任何语法错误，我也找不到任何语法错误，所以我假设我在 AJAX 请求中犯了一个逻辑错误。如果有人能告诉我哪里出了问题，我将不胜感激:

if (navigator.geolocation) {

  window.onload = function(){

    var currentPosition;
    function getCurrentLocation (position) {
      currentPosition = position;
      var lat = currentPosition.coords.latitude;
      var long = currentPosition.coords.longitude;

      $.getJSON('api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + "&appid=81621bf2bb3e08f0bfd40540baafb8ee", function(data) {
      $('#info').append('<p>' + data.weather[0].description + '</p>');          
      });      
    };     
  };

  navigator.geolocation.getCurrentPosition(getCurrentLocation);
}

<div class="main">
  <div align="center" id="info"></div>
</div>

我只提供了我认为相关的代码，但如果您需要完整的代码，可以点击我上面包含的第一个链接。
感谢您的建议并提前抽出时间:)

Answer 1

这里有两个主要问题:

第一行是这一行:

$.window.onload

这段代码没有执行您期望的操作($.window 未定义)，将其更改为 window.onload 应该可以解决该问题。

第二个问题更严重:您收到CORS(跨源资源共享)错误。 MetaWeather 似乎不允许跨源请求(源自某个域并请求来自不同域的数据的请求，例如 codepen.io --> metaweather.com)。

这通常可以通过 JSONP 回调(MetaWeather 也不支持)、代理您的请求(例如 Nginx)或设置您自己的后端 API(例如 Node.js)并通过该 API 进行调用来解决。

Here's a sample app tutorial它解决了一个与您尝试使用 OpenWeatherMap API 编写的项目非常相似的项目，该项目将允许您从浏览器执行 API 请求。