Vue开发模式读取GitHub CSV遇CORS预请求失败问题求助

在Vue开发模式下，尝试通过d3直接读取GitHub上的CSV文件，代码如下：

datal() {
  const data = d3.csv("https://raw.githubusercontent.com/example/examples.csv")
}

出现Preflight Did Not Succeed Error，尝试配置vue.config.js但未解决，配置代码如下：

module.exports = {
  devServer: {
    host: "0.0.0.0",
    port: 8070,
    compress: true,
    headers: { "Access-Control-Allow-Origin": "*" },
    proxy: {
      "^https://raw.githubusercontent.com": {
        target: "https://raw.githubusercontent.com",
        changeOrigin: true,
        ws: true,
        headers: {
          "Content-Type": "application/text;charset=UTF-8",
          "Access-Control-Allow-Origin": "https://raw.githubusercontent.com"
        }
      }
    }
  },
}

求解决思路。

1. 修正本地代理配置 #

你的vue.config.js代理配置存在两个核心问题：

• 代理路径匹配规则错误：proxy的key应为本地请求的前缀，而非完整目标URL。正确做法是定义短前缀（如/github-raw），请求时替换原URL前缀。
• 无效请求头设置：给代理目标添加Access-Control-Allow-Origin无意义，该响应头应由目标服务器返回，本地代理无需配置。

修正后的vue.config.js：

module.exports = {
  devServer: {
    host: "0.0.0.0",
    port: 8070,
    compress: true,
    proxy: {
      '/github-raw': {
        target: 'https://raw.githubusercontent.com',
        changeOrigin: true,
        pathRewrite: {
          '^/github-raw': '' // 移除本地请求前缀，转发至目标URL
        }
      }
    }
  }
}

同时修改d3请求代码，改用代理前缀：

datal() {
  const data = d3.csv("/github-raw/example/examples.csv")
}

2. 替代方案：使用本地静态文件 #

若代理配置仍有问题，可直接将GitHub上的CSV文件下载到Vue项目的public目录，读取本地文件彻底规避跨域：

datal() {
  const data = d3.csv("/examples.csv")
}

3. 检查GitHub文件权限 #

确认目标CSV所在仓库为公开仓库，私有仓库的raw文件需携带授权Token才能访问，未携带会导致请求失败。若为私有仓库，需在请求头中添加：

headers: {
  "Authorization": "token <你的GitHub Token>"
}

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