前端使用高德天气，及解决跨域问题

前端小菜鸟也有人起

已于 2024-07-16 09:32:22 修改

阅读量1k

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端

于 2024-04-15 11:29:23 首次发布

本文链接：https://blog.csdn.net/weixin_63730900/article/details/137774280

博客介绍了从高德官网获取天气信息的步骤，包括创建新应用，还给出定位接口和天气预报接口文档。同时提到在获取过程中遇到跨域报错问题，尝试多种方法后用简单方法解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

高德天气获取

访问高德官网，控制台，应用，创建新应用，高德开放平台 | 高德地图API (amap.com)

接口文档：

定位接口：IP定位-API文档| 高德地图API

天气预报接口：天气查询-API文档 | 高德地图API

我这里会报跨域的错，找了很多方法没解决，最后用了一个简单的方法

  const [weather, setWeather] = useState({});
  useEffect(() => {
    fetch('https://restapi.amap.com/v3/weather/weatherInfo?city=370104&key=你的key')
      .then(response => response.json())
      .then(data => {
        if (data.status === '1') {
          setWeather(data.lives[0]);
          console.log(data.lives[0]);
        } else {
          console.error('Failed to fetch weather data:', data.info);
        }
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);