Express配置CORS后fetch请求仍报跨域错误问题求助

问题1：Express中间件执行顺序错误 #

Express的中间件、路由注册是严格按照代码书写顺序执行的，你当前的代码顺序存在逻辑错误：

• 先注册了app.get('/')路由
• 再执行app.listen()启动服务
• 最后才注册CORS中间件
  当请求进来时，会直接匹配到先注册的/路由返回响应，永远不会走到后面的CORS中间件，所以跨域响应头始终不会被设置。

问题2：CORS的origin配置错误 #

首先报错信息明确显示请求来源origin为null，说明你是直接双击打开本地HTML文件运行前端，没有启动本地静态服务托管前端代码；其次就算你前端用服务启动，你把origin配置成了后端自身的地址http://localhost:3000，origin字段需要填写的是前端页面的访问地址，而非后端地址，配置完全反向。

问题3：跨域凭证配置不匹配（可选，无cookie传递需求可忽略） #

如果你开启了CORS的credentials: true配置，前端fetch请求也需要同步添加credentials: 'include'参数，否则携带cookie的请求依然会被拦截。

修复方案 #

1. 调整app.js代码顺序，将CORS中间件移到所有路由注册、服务启动之前：

const express = require('express')
const app = express()
const port = 3000
const mysqlConObj = require('./config/mysql.js')
const db = mysqlConObj.init()
const cors = require('cors');
mysqlConObj.open(db)

// 第一步：优先注册CORS中间件
app.use(cors({
  // 本地调试阶段可以设为true自动匹配请求origin，生产环境请替换为实际前端部署地址
  origin: true, 
  credentials: true
})); 

// 第二步：注册所有业务路由
app.get('/', (req, res) => res.send('MyAPIName'))

// 第三步：最后启动服务
app.listen(port, () => console.log('Server Running. . .'))

2. 若无跨域传递cookie的需求，可直接简化CORS配置为app.use(cors())，无需额外参数，也不用修改前端fetch代码。
3. 若需要传递cookie，前端fetch代码补充凭证配置：

function getAPI() {
    return fetch('http://localhost:3000', {
      credentials: 'include'
    });
}

4. 建议前端不要直接打开本地HTML运行，用serve、Vite、Webpack DevServer等工具启动本地静态服务，避免origin为null的问题，也便于后续调试。

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