Express应用出现No 'Access-Control-Allow-Origin'跨域错误如何解决？

这个报错是浏览器同源策略触发的跨域资源共享（CORS）校验失败导致的：

• Access-Control-Allow-Origin 属于服务端响应头，必须由后端接口返回给浏览器，你在前端请求头里配置这个字段完全无效，属于配置位置错误。
• 你前端运行地址的协议、域名、端口三者和后端服务http://localhost:5000不一致，浏览器会自动校验后端返回的响应头是否允许当前前端地址访问，没有对应头就会抛出该错误。

1. 先删掉前端请求头里的'Access-Control-Allow-Origin': '*'配置，该配置不仅无效，还可能导致额外的预检请求校验问题。
2. 在Express后端服务中配置CORS，推荐两种方案：

方案1：使用官方cors中间件（最简便） #

• 安装依赖：
  npm install cors
• 在Express入口文件中引入并启用，注意要放在所有路由定义之前：

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

// 全局允许所有跨域请求，生产环境建议替换为指定前端地址
app.use(cors())
// 示例：仅允许http://localhost:3000的跨域请求
// app.use(cors({ origin: 'http://localhost:3000' }))

// 后面再写你的路由逻辑
app.post('/admin/authenticate', (req, res) => {
  // 你的登录逻辑
})

方案2：手动编写跨域中间件（无需第三方依赖） #

直接在Express入口文件、所有路由之前添加以下中间件：

app.use((req, res, next) => {
  // 允许的请求源，生产环境替换为你的前端实际地址，不要用*
  res.header('Access-Control-Allow-Origin', '*')
  // 允许的请求头字段
  res.header('Access-Control-Allow-Headers', 'Content-Type, Accept')
  // 允许的请求方法
  res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE')
  // 处理OPTIONS预检请求，直接返回200状态码
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200)
  }
  next()
})

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