使用PyScript的pyfetch获取CSV失败，JSON请求可正常执行

问题场景 #

尝试用PyScript从URL读取CSV文件（最终计划加载至pandas），参考官方文档使用pyfetch能正常获取JSON格式数据，但请求CSV文件时失败。原测试代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>
  <body>
    <py-script>
        import asyncio
        import json
        
        from pyodide.http import pyfetch

        
        async def main():
            # 可正常运行
            url = "https://jsonplaceholder.typicode.com/posts/2"
            response = await pyfetch(url)
            print(f"status:{response.status}")

            # 运行失败
            url = "https://people.math.sc.edu/Burkardt/datasets/csv/turtles.csv"
            response = await pyfetch(url)
            print(f"status:{response.status}")


        asyncio.ensure_future(main())
    </py-script>
  </body>
</html>

失败原因 #

请求失败的核心是跨域资源共享（CORS）限制。你使用的CSV文件所在服务器未配置CORS响应头，浏览器出于安全策略会拦截跨域请求；而JSON接口所在服务器配置了允许跨域的响应头，因此能正常访问。

解决方案 #

1. 更换支持CORS的CSV数据源 #

选择公开且支持跨域的CSV文件地址，比如GitHub Raw、公共数据平台提供的API等。

2. 正确读取CSV响应内容 #

CSV文件需用response.text()读取文本内容，再转换为pandas可处理的格式。

以下是修正后的完整代码，包含加载至pandas的步骤：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    <py-config>
      packages = ["pandas"]
    </py-config>
  </head>
  <body>
    <py-script>
        import asyncio
        import pandas as pd
        from pyodide.http import pyfetch
        from io import StringIO

        async def main():
            # 正常工作的JSON请求
            url = "https://jsonplaceholder.typicode.com/posts/2"
            response = await pyfetch(url)
            print(f"JSON请求状态:{response.status}")
            json_data = await response.json()
            print("JSON数据标题:", json_data["title"])

            # 使用支持CORS的CSV数据源
            csv_url = "https://raw.githubusercontent.com/datasets/gdp/master/data/gdp.csv"
            response = await pyfetch(csv_url)
            print(f"CSV请求状态:{response.status}")
            
            # 读取CSV文本并加载到pandas
            csv_text = await response.text()
            df = pd.read_csv(StringIO(csv_text))
            print("CSV数据前5行:")
            print(df.head())

        asyncio.ensure_future(main())
    </py-script>
  </body>
</html>

代码说明 #

• 新增<py-config>标签配置加载pandas包，满足后续数据处理需求
• 使用response.text()获取CSV的文本内容，通过StringIO转换为pandas可读取的格式
• 选用的GitHub Raw地址默认支持跨域请求，可正常访问

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