CORS配置后POST请求报错：预检请求未通过访问控制检查

你的代码里存在几个明确的问题，直接导致POST等修改类请求的预请求（OPTIONS）失败，以下是逐一修复方案：

1. 允许的Origin地址末尾多了斜杠 #

allowedOrigins里写的是'http://localhost:3000/'，但浏览器实际发送的Origin是不带末尾斜杠的'http://localhost:3000'，这会导致CORS匹配失败，预请求得不到正确的Access-Control-Allow-Origin响应头。

修复：
修改allowedOrigins，去掉末尾斜杠：

const allowedOrigins = [
    'http://localhost:3000'
]

2. 重复定义CorsOptions导致配置被覆盖 #

你先自行定义了CorsOptions对象，随后又通过require('./config/CorsOptions')重新赋值，这会把前面写的配置完全覆盖。如果config文件里的配置存在问题，就会直接生效导致当前配置失效。

修复：
删掉重复的require语句，确保使用当前定义的CorsOptions：

// 移除这行：const CorsOptions = require('./config/CorsOptions')

如果你的配置确实放在config文件中，就删掉当前文件里的CorsOptions定义，仅使用require进来的版本，同时检查config文件里的配置是否正确。

3. CORS配置属性名大小写错误 #

你写的Credentials: true是大写开头，但cors中间件的配置属性是小写的credentials，大写属性名会被中间件忽略，这会影响凭证请求处理，也可能间接导致预请求异常。

修复：
改成小写：

const CorsOptions = {
    origin: allowedOrigins,
    credentials: true, // 此处改为小写
    methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
    allowedHeaders: ['Content-Type'],
    optionsSuccessStatus: 204
}

4. 调整中间件顺序 #

确保app.use(cors(CorsOptions))加载在所有路由和解析中间件（比如express.json()、urlencoded）之前，预请求需要先经过CORS中间件处理，否则请求会被先解析但无法获取CORS响应头。

正确顺序示例：

const cors = require('cors')
const allowedOrigins = ['http://localhost:3000']
const CorsOptions = {
    origin: allowedOrigins,
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
    allowedHeaders: ['Content-Type'],
    optionsSuccessStatus: 204
}

// 先加载CORS中间件
app.use(cors(CorsOptions))
// 再加载解析中间件
app.use(express.urlencoded({ extended: false }))
app.use(express.json())
// 最后加载路由
// app.use('/workout', workoutRouter)

验证修复 #

修改后重启服务器，再次发送POST请求即可正常通过预请求。如果仍有问题，可在浏览器开发者工具的「网络」标签中查看OPTIONS请求的响应头，确认是否包含Access-Control-Allow-Origin、Access-Control-Allow-Methods等必要字段。

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