客户端JavaScript脚本中Async/Await结合Fetch调用API无返回结果：客户端与服务端代码差异解析求助

让我帮你理清这里的关键区别，你的客户端代码跑不起来主要是踩了前端开发中两个非常常见的坑：

1. 浏览器的同源策略（CORS限制） #

这是最核心的问题：浏览器会阻止前端脚本直接请求不同源的API，而服务端(Node.js)发起请求则不受这个限制。

• 你的客户端代码直接从浏览器向http://www.7timer.info发起请求，这个域名和你的前端页面域名（比如本地的localhost，或者部署后的域名）属于不同源，浏览器会触发CORS预检请求，而7timer.info的API服务器没有配置允许你的域名跨域访问的响应头，所以浏览器会直接拦截请求，根本不会返回数据。
• 而服务端的Node.js代码是在服务器环境发起请求，不存在浏览器的同源策略限制，只要API本身能正常访问，就能拿到数据。

2. 顶层await的使用限制 #

你的客户端代码里直接写了：

document.write(await fetchWeatherData());

普通的<script>标签不支持顶层await（也就是在async函数外部直接用await），你需要把脚本声明为模块类型才能使用顶层await，或者把这段代码放到async函数内部执行。

比如改成模块脚本：

<script type="module">
async function fetchWeatherData(){
  var url = "http://www.7timer.info/bin/api.pl?lon=-3.57&lat=40.49&product=astro&output=json";
  var weather_data = await fetch(url);
  var weather_json = await weather_data.json();
  return weather_json.dataseries[0].temp2m;
}
document.write(await fetchWeatherData());
</script>

不过即使改了这个，CORS的问题还是会阻止你拿到数据，所以这只是第二个需要修复的点。

如何修复客户端代码？ #

解决CORS问题有几种常见方案：

• 搭建一个自己的后端代理服务器：比如用Express写个简单的接口，在后端调用7timer.info的API，然后前端请求自己的后端接口（同源，不会有CORS问题），这其实就是你服务端代码的思路。
• 检查API是否支持JSONP：有些老的天气API支持JSONP格式，你可以看看7timer.info的文档有没有相关参数（比如output=jsonp），JSONP可以绕过CORS限制，但只支持GET请求。
• 使用浏览器的跨域调试工具：比如Chrome的--disable-web-security参数（仅用于本地调试，不能用于生产环境）。

内容的提问来源于stack exchange，提问作者Kaguei Nakueka