Axios DELETE请求被CORS策略拦截，问题排查求助

问题背景 #

后端基于Node+Express运行在8000端口，前端ReactJS运行在localhost:3000，使用Axios发起DELETE请求时Chrome报CORS拦截错误。Postman可正常执行该DELETE请求，已启用Chrome的Access-Control-Allow-Origin插件但无效。

相关代码片段 #

后端CORS配置 #

AppDataSource.initialize()
.then(()=>{

    ...
    const app = express()

    app.use(express.json())
    app.use(cookieParser())
    app.use(cors({
        allowedHeaders: ['Content-Type', 'Authorization'],
        credentials: true,
        origin: ['localhost:3000'],
        methods: ['GET', 'POST', 'PUT', 'DELETE']
    }))

    ...
})

前端Axios请求代码 #

const deleteUser = async (id: number) => {
        if (window.confirm('Are you sure you want to delete this record?')){

            try {
                await axios.delete(`users/${id}`)
                setUsers(users.filter((u: UserType) => {
                    return u.id !== id
                }))
            }catch(e){
                console.log(e)
            }           
        }
    }

后端删除接口代码 #

export const DeleteUser = async (req: Request, res: Response) => {
    const id = parseInt(req.params.id)
    const repository =  AppDataSource.getRepository(User)
    const user = await repository.findOneBy({id})

    if (!user) {
        res.status(404).send({
            message: "No user found"
        })
    } else {
        await repository.delete(id)
        
        res.status(204).send({
            message: "User deleted"
        })
    }
}

具体排查步骤 #

• 修正CORS的origin配置
  浏览器对origin匹配要求严格，localhost:3000需补充协议头，改为['http://localhost:3000']（若前端用HTTPS则对应修改），不带协议的origin会被部分浏览器判定为无效，导致CORS策略不匹配。

• 检查Axios请求的完整URL
  前端代码中axios.delete(users/${id})使用相对路径，需确认Axios是否配置了baseURL指向http://localhost:8000。未配置的话请求会发送到前端3000端口，直接触发跨域错误。可先替换为完整路径测试：await axios.delete(http://localhost:8000/users/${id})。

• 修正204状态码的响应格式
  HTTP规范规定204状态码的响应不能包含body，但当前代码返回了send({message: "User deleted"})，部分浏览器会因不符合规范触发CORS错误。可改为：

  res.status(204).end()
  

  或把状态码换成200保留响应体。

• 确认CORS中间件加载顺序
  确保app.use(cors(...))在所有路由定义之前执行，若路由先注册，CORS中间件不会对这些路由生效，导致跨域拦截。

• 禁用Chrome CORS插件后重试
  部分CORS插件会与浏览器原生CORS机制冲突，先禁用插件，按前面的步骤修正代码后再测试。

• 检查预检请求状态
  打开Chrome开发者工具Network面板，查看OPTIONS请求（DELETE属于非简单请求，会先发预检）的响应状态码和响应头。若OPTIONS请求返回404或其他错误，说明后端未正确处理预检请求，需确认是否有其他中间件（如路由拦截）提前拦截了OPTIONS请求。

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