如何通过Axios向GitHub上的JSON文件添加数据？遇CORS问题求助

首先明确核心问题：GitHub Pages是静态站点托管服务，只提供静态文件的读取能力，完全不支持POST/PUT这类写入请求。你遇到的CORS错误只是表象——因为GitHub Pages的服务器根本不会处理写入请求，自然不会返回允许跨域的响应头。

下面是几种可行的解决办法：

方案1：通过GitHub API修改仓库文件 #

GitHub提供了API可以直接修改仓库里的文件，步骤如下：

• 先生成一个GitHub个人访问令牌（PAT），权限要勾选repo（私有仓库）或public_repo（公共仓库）。
• 按照以下流程实现：
  1. 获取目标文件的当前SHA值（GitHub用这个确保修改基于最新版本）
  2. 将更新后的数据转成base64编码
  3. 发送PUT请求到GitHub的文件更新接口

示例代码：

const repoOwner = '你的GitHub用户名';
const repoName = '你的仓库名称';
const filePath = 'path/tiles.json'; // 仓库内的文件路径，不是GitHub Pages的URL
const token = '你的GitHub个人访问令牌';

// 第一步：获取文件当前内容和SHA
axios.get(`https://api.github.com/repos/${repoOwner}/${repoName}/contents/${filePath}`, {
  headers: {
    Authorization: `token ${token}`
  }
})
.then(response => {
  // 解码当前文件内容
  const currentData = JSON.parse(atob(response.data.content));
  const currentSha = response.data.sha;

  // 添加新数据
  currentData.push(newData);
  // 编码更新后的内容
  const updatedContent = btoa(JSON.stringify(currentData));

  // 第二步：发送更新请求
  return axios.put(`https://api.github.com/repos/${repoOwner}/${repoName}/contents/${filePath}`, {
    message: '新增一条数据',
    content: updatedContent,
    sha: currentSha
  }, {
    headers: {
      Authorization: `token ${token}`,
      'Content-Type': 'application/json'
    }
  });
})
.then(() => {
  message_correct('数据添加成功。');
})
.catch(error => {
  message_error('数据更新失败。', error);
});

⚠️ 注意：绝对不能在前端代码里直接暴露你的PAT，会导致令牌泄露被滥用！如果是前端应用，必须通过自己的后端服务代理这个请求，由后端持有令牌并调用GitHub API。

方案2：用第三方BaaS服务存储数据 #

如果不想自己搭后端，可以用Firebase实时数据库、Supabase这类后端即服务（BaaS）来存数据，这些服务都支持跨域配置，前端可以直接调用它们的API写入数据。

方案3：搭建自己的后端服务 #

用Node.js、Python等写一个简单的后端接口，前端把新数据传给后端，由后端负责：读取GitHub仓库里的JSON文件、更新内容、再推回仓库（可以用octokit这类库简化GitHub API调用）。

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