PyScript调用API遇NetworkError（pyfetch/pyodide.http）求助

问题描述 #

打开渲染PyScript代码的HTML文件时，出现错误：JsException: TypeError: NetworkError when attempting to fetch resource。替换为其他API时PyScript可正常运行，仅目标API无法工作，怀疑是安全相关问题。

使用的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WeatherAPP</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
   <h1>Dash</h1>
   <p>bottom_line</p>
   <p>getting python code...</p>
   <div id="request_status"></div>
        <div id="request_text"></div>
   <py-script>
from pyodide.http import pyfetch
import asyncio
import json
response = await pyfetch(url="https://api.avalanche.org/v2/public/product?type=weather&center_id=MWAC&zone_id=1307", method="GET")
status = f"Request status: {response.status}"
response_dict = await response.json()

text = f"Text: {response_dict['id']}"

pyscript.write('request_status', status)
pyscript.write('request_text', text)
   </py-script>
</body>
</html>

原因分析 #

这个错误几乎可以确定是CORS（跨域资源共享）限制导致的。浏览器的同源策略会阻止脚本从不同域名、端口或协议的服务器获取资源，而api.avalanche.org的API大概率没有配置允许本地页面（通常是file://协议或localhost）发起跨域请求的响应头。此外，也可能是API需要认证但未提供，服务器拒绝请求后被浏览器包装成NetworkError。

解决方案 #

1. 用本地HTTP服务器访问页面 #

直接打开本地HTML文件用的是file://协议，很多API会拒绝这种跨域请求。启动一个简单的本地服务器，通过http://localhost访问页面：

• 打开终端，进入HTML文件所在目录，执行命令：

  python -m http.server 8000
  

• 在浏览器中访问http://localhost:8000/你的文件名.html，再测试请求是否正常。

2. 通过CORS代理转发请求 #

如果API本身不支持跨域，可以用CORS代理中转请求。你可以自己搭建一个简单的CORS代理服务，或者使用可信的代理服务，将目标API地址作为参数传给代理，修改PyScript中的请求URL格式为代理地址/目标API地址。

3. 检查API是否需要认证 #

部分公共API看似开放，实际需要携带API密钥才能访问。查看avalanche.org的API文档，若需要认证，在pyfetch中添加请求头：

response = await pyfetch(
    url="https://api.avalanche.org/v2/public/product?type=weather&center_id=MWAC&zone_id=1307",
    method="GET",
    headers={"Authorization": "Bearer 你的API密钥"}
)

调试技巧 #

• 打开浏览器开发者工具的Network面板，查看该请求的详细信息：确认响应头是否包含Access-Control-Allow-Origin，以及请求的实际状态码（可能是401、403等，被浏览器包装成NetworkError）。
• 直接在浏览器地址栏访问API URL，确认API本身是否能正常返回数据，排除API故障的可能。

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