如何解决CircleCI API v1中的CORS问题

核心原因 #

CircleCI API v1的服务器未配置允许你前端域名的Access-Control-Allow-Origin响应头，导致浏览器同源策略拦截了跨域请求。临时使用的cors-anywhere方案依赖第三方服务，存在性能、安全风险，不适合生产环境，推荐以下稳定方案：

1. 自建后端代理（最推荐） #

通过自己的后端服务转发请求，后端请求不受浏览器同源策略限制，还能安全存储CircleCI API Token（避免前端暴露敏感信息）。

以Node.js/Express为例，简单实现代理接口：

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = process.env.PORT || 3001;

// 代理CircleCI最近任务请求
app.get('/circleci/recent-jobs', async (req, res) => {
  try {
    const { username, project } = req.query;
    // 从环境变量读取API Token，禁止硬编码
    const apiToken = process.env.CIRCLECI_API_TOKEN;

    const response = await axios.get(
      `https://circleci.com/api/v1/project/${username}/${project}`,
      { headers: { Authorization: `token ${apiToken}` } }
    );

    res.json(response.data);
  } catch (err) {
    res.status(err.response?.status || 500).send(err.message);
  }
});

app.listen(PORT, () => console.log(`代理服务运行在端口 ${PORT}`));

前端只需请求自己的后端接口：

// React中调用代理接口
fetch(`/circleci/recent-jobs?username=你的用户名&project=你的项目名`)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

该方案优势：

• 彻底解决CORS问题
• 安全存储API Token，防止前端泄露
• 可扩展缓存、请求日志、自定义错误处理等功能

2. 迁移到CircleCI API v2 #

CircleCI API v2相比v1有更完善的设计，部分端点可能支持更灵活的CORS配置，或提供OAuth 2.0等适配前端跨域的认证方式。先确认API v2是否包含你需要的「单个项目最近任务」功能，若满足需求，迁移到v2不仅能解决CORS问题，还能获得官方更好的后续支持。

3. 服务器反向代理（同域名部署场景） #

如果你的React项目和后端服务部署在同一个域名下，可以通过Nginx等服务器配置反向代理，将前端特定路径的请求转发到CircleCI API。

Nginx配置示例：

server {
  listen 80;
  server_name your-domain.com;

  # 转发CircleCI请求
  location /circleci-api {
    proxy_pass https://circleci.com/api/v1/;
    # 注入API Token请求头
    proxy_set_header Authorization "token $CIRCLECI_API_TOKEN";
    # 传递必要的请求头
    proxy_set_header Host circleci.com;
  }

  # 前端静态资源服务
  location / {
    root /path/to/react/build;
    try_files $uri $uri/ /index.html;
  }
}

前端请求路径改为/circleci-api/project/你的用户名/你的项目名，即可通过Nginx转发到CircleCI API，无CORS问题。

4. 检查CircleCI的CORS白名单配置 #

登录CircleCI账户，查看项目或账户级别的API设置，确认是否支持添加前端域名到CORS允许列表。不过CircleCI API v1大概率没有该功能，优先尝试前面的方案。

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