NextJS+Express跨域问题：同局域网移动端访问报CORS错误

问题背景 #

使用NextJS作为前端服务、ExpressJS作为后端服务，部分页面通过getServerSideProps实现SSR。为解决生产环境跨域问题，在next.config.mjs中配置了rewrites代理规则：

async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: `${process.env.NEXT_PUBLIC_EXTERNAL_API}/:path*`,
      },
    ];
  },

前端调用后端API的代码如下：

login: async (credentials) => {
    try {
      const response = await fetch(`${AUTH_API_URL}/login`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(credentials),
      });
      if (response.ok) {
        const { data } = await response.json();
        return data;
      } else {
        const { message } = await response.json();
        throw new Error(message);
      }
    } catch (error) {
      throw new Error(error.message);
    }
  }

本地PC端运行正常，但同局域网内用移动端通过192.168.0.127访问页面时，出现CORS错误：

Fetch API cannot load http://localhost:8081/api/auth/login due to access control checks.

已在Express后端配置允许所有源，且尝试直接调用API仍报CORS错误。

问题根源 #

1. 环境变量与请求路径不匹配：本地开发时NEXT_PUBLIC_EXTERNAL_API可能被设置为http://localhost:8081，移动端访问前端服务（192.168.0.127）时，前端代码直接请求localhost:8081，但移动端无法将localhost解析为电脑的局域网IP，同时因页面域名与请求目标域名不一致，触发跨域检查。
2. Express CORS配置缺陷：自定义的CORS中间件未完整处理OPTIONS预检请求，或中间件加载顺序错误，导致预检请求未被正确响应。

解决方案 #

方案一：利用Next.js代理统一请求路径 #

1. 修改前端API调用为相对路径：将AUTH_API_URL替换为相对路径/api/auth，让所有请求先走Next.js的代理规则，避免直接访问后端地址：

login: async (credentials) => {
    try {
      const response = await fetch(`/api/auth/login`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(credentials),
      });
      if (response.ok) {
        const { data } = await response.json();
        return data;
      } else {
        const { message } = await response.json();
        throw new Error(message);
      }
    } catch (error) {
      throw new Error(error.message);
    }
  }

2. 修正环境变量值：将NEXT_PUBLIC_EXTERNAL_API设置为后端服务的局域网IP（如http://192.168.0.127:8081），确保Next.js代理能正确转发请求到后端。

方案二：修复Express后端CORS配置 #

1. 改用官方cors中间件：替换自定义CORS中间件，官方cors包能更完整处理预检请求：

// 注释掉自定义的CORS中间件，替换为以下配置
app.use(cors({
  origin: '*',
  credentials: true,
  methods: ['GET', 'POST', 'OPTIONS', 'PUT', 'PATCH', 'DELETE'],
  allowedHeaders: ['X-Requested-With', 'Content-Type', 'Authorization']
}));

2. 调整中间件顺序：确保CORS中间件在所有路由、解析类中间件（如express.json()）之前加载，保证所有请求都经过CORS处理。

方案三：本地开发调试优化 #

启动Next.js时绑定到局域网IP，确保移动端能正常访问前端服务：

next dev -H 192.168.0.127

验证步骤 #

1. 重启前端和后端服务
2. 移动端访问http://192.168.0.127:3000（假设Next.js端口为3000）
3. 触发登录请求，检查是否仍存在CORS错误

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