本地调用外部API出现带本地地址的404错误，求解决方案

DevOps 小满

2026-5-14

问题分析与解决办法

嘿，别担心，刚入门编程遇到这种问题太正常啦！我来帮你一步步理清问题～

为什么请求会带上本地地址127.0.0.1:5500？

这是因为你在拼接API地址时用错了字符串类型：
你现在用的是单引号'来包裹API地址，但ES6的模板字符串插值${变量名}只能在反引号`（就是键盘上数字1左边的那个键）包裹的字符串里生效。

当你用单引号时，${proxy}没有被解析成实际的代理地址https://cors-anywhere.herokuapp.com/，反而被当成了普通字符串的一部分。浏览器会把这个不完整的路径当成本地资源来请求，所以自动拼接上了你本地服务的地址127.0.0.1:5500，最终就出现了404错误。

如何解决这个问题？

只需要把定义api变量的单引号换成反引号就行，同时还可以优化一下，把固定坐标换成你获取到的用户经纬度，让请求更贴合需求：

修改后的代码片段

window.addEventListener("load", ()=> { 
  var long; 
  var lat; 
  if(navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(position => { 
      console.log(position); 
      long = position.coords.longitude; 
      lat = position.coords.latitude; 
      console.log(long, lat); 
      const proxy = 'https://cors-anywhere.herokuapp.com/'; 
      // 把单引号改成反引号，同时替换成动态经纬度
      const api = `${proxy}https://api.darksky.net/forecast/c8896cdad78b43417e8fb2969fbc5d21/${lat},${long}`; 
      fetch(api) 
        .then(response => response.json()) 
        .then(json => console.log(json)) 
    }); 
  } 
});