Express+React项目CORS跨域问题：No 'Access-Control-Allow-Origin'头缺失

我查了一堆相关教程、文档和链接，还是没解决问题，急死了。下面是我的服务端代码、客户端代码和报错信息，我觉得可能是请求方法的问题，但已经试过调整了，还是不行。

服务端代码 #

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

const app = express();
const router = express.Router()

app.use(json());
app.use(router);
const PORT = process.env.PORT || 5000
var server_host = process.env.YOUR_HOST || '0.0.0.0';

const corsOptions = {
    origin: ['http://localhost:3000', 'https://swapee-interface.vercel.app/', 'https://app.swapee.io'] 
}

app.listen(PORT, server_host, () => {
    console.log(`server is listening on port: ${PORT}`)
})

router.get('/:chain/:dex/:token', cors(corsOptions), async(req, res) =>{
 //some logic
})

客户端代码 #

useEffect(() => {
    axios({
        url: `https://swapee-api.herokuapp.com/${items.chain}/${items.dex}/${items.address}`,
        method: 'get',
    })
    .then((res) => { 
        console.log(res)
        setTokenPrice(res.data) })
}, [])

useEffect(() => {
    axios({
        url: `https://swapee-api.herokuapp.com/${items.chain}/${items.dex}/${address}`,
        method: 'get',
    })
        .then((response) => {
            console.log(response)
            setCoinPrice(response.data)})
  // empty dependency array means this effect will only run once (like componentDidMount in classes)
  }, []);

报错信息 #

Access to XMLHttpRequest at 'https://swapee-api.herokuapp.com/137/Quickswap/0xe9e7cea3dedca5984780bafc599bd69add087d56' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题原因及修复步骤 #

1. express.json()引用错误：代码里的app.use(json())会直接报错，因为没定义json变量，要改成app.use(express.json())。
2. CORS的origin配置有无效项：https://swapee-interface.vercel.app/末尾多了斜杠，会导致origin匹配失败，改成https://swapee-interface.vercel.app。
3. 中间件顺序错误：当前先挂载了router，再在路由里加cors，建议全局挂载CORS中间件，确保所有请求都能处理跨域：

   // 调整顺序：先配置CORS和解析中间件，再挂载路由
   const corsOptions = {
       origin: ['http://localhost:3000', 'https://swapee-interface.vercel.app', 'https://app.swapee.io'] 
   }
   app.use(cors(corsOptions));
   app.use(express.json());
   app.use(router);
   

4. 可选：验证请求origin：可以在路由里打印请求来源，确认是否在允许列表内：

   router.get('/:chain/:dex/:token', async(req, res) =>{
       console.log('请求来源:', req.headers.origin);
       // some logic
   })
   

修复后的完整服务端代码示例：

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

const app = express();
const router = express.Router()

const PORT = process.env.PORT || 5000
var server_host = process.env.YOUR_HOST || '0.0.0.0';

const corsOptions = {
    origin: ['http://localhost:3000', 'https://swapee-interface.vercel.app', 'https://app.swapee.io'] 
}

app.use(cors(corsOptions));
app.use(express.json());
app.use(router);

app.listen(PORT, server_host, () => {
    console.log(`server is listening on port: ${PORT}`)
})

router.get('/:chain/:dex/:token', async(req, res) =>{
 // some logic
})

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