GitHub Codespaces下BFF架构NX项目的CORS跨域问题求助

应用采用BFF架构，使用NX作为单仓管理工具，在GitHub Codespaces中运行时遇到前后端通信CORS策略失败问题：

• 前端运行在4080端口，启动命令：

npx nx serve console --publicHost=${CODESPACE_NAME}-4080.githubpreview.dev:443 --configuration=codespaces

• API服务运行在3080端口，CORS及Cookie配置：

const corsOptions = {
  origin: [
    'https://{app-name}-{codespace-name}-4080.githubpreview.dev',
  ],
  credentials: true,
};
const cookieOptions = {
  httpOnly: true,
  sameSite: 'none',
  secure: true,
  path: '/',
};

• 报错信息：

Access to XMLHttpRequest at 'https://{app-name}-{codespace-name}-3080.githubpreview.dev/auth/refresh-token' 
from origin 'https://{app-name}-{codespace-name}-4080.githubpreview.dev' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
Redirect is not allowed for a preflight request.

1. 排查API服务的重定向问题 #

预请求（OPTIONS）不允许重定向，若API服务启动时使用HTTP协议，但访问时用HTTPS，会触发自动重定向导致报错。需确保：

• API服务在Codespaces中以HTTPS启动，或配置端口映射时避免HTTP转HTTPS的自动重定向
• 检查API服务的启动命令，确保绑定的端口和协议与公网访问地址一致

2. 动态配置CORS的Origin #

硬编码的{app-name}-{codespace-name}无法匹配实际Codespaces域名，需用环境变量动态生成Origin：

const codespaceName = process.env.CODESPACE_NAME;
const corsOptions = {
  origin: [
    `https://${codespaceName}-4080.githubpreview.dev`,
  ],
  credentials: true,
};

确保Origin与前端公网地址完全匹配（包括HTTPS和端口）

3. 确保CORS中间件优先处理OPTIONS请求 #

在Express等框架中，需将CORS中间件挂载在所有业务路由之前，避免OPTIONS请求被其他路由/中间件拦截并返回重定向：

const express = require('express');
const cors = require('cors');
const app = express();

// 先挂载CORS中间件
app.use(cors(corsOptions));

// 再挂载业务路由
app.use('/auth', require('./routes/auth'));

4. 优化Cookie配置 #

确保Cookie的domain设置正确，或不指定domain（让浏览器自动匹配当前域名），避免因domain不匹配导致的隐性问题：

const cookieOptions = {
  httpOnly: true,
  sameSite: 'none',
  secure: true,
  path: '/',
  // 若不需要跨子域，可移除domain配置
  // domain: `.githubpreview.dev`
};

5. 使用NX代理绕过CORS（推荐） #

利用NX的代理功能，让前端请求通过本地开发服务器代理到后端，避免跨域：

1. 在Angular项目根目录创建proxy.conf.json：

{
  "/auth": {
    "target": "http://localhost:3080",
    "secure": false,
    "changeOrigin": true
  }
}

2. 修改前端启动命令，添加代理配置：

npx nx serve console --publicHost=${CODESPACE_NAME}-4080.githubpreview.dev:443 --configuration=codespaces --proxy-config proxy.conf.json

3. 前端代码中请求API时使用相对路径（如/auth/refresh-token），代理会自动转发到后端3080端口

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