已配置Express CORS仍触发Cross Origin Request Blocked错误求助

以下是排查和解决的关键步骤：

1. 修正Express中间件顺序 #

你的Express代码中，路由挂载在body-parser之前，这会导致路由无法解析请求体，同时可能影响CORS中间件的生效顺序。正确的顺序应该是：先加载CORS和请求体解析中间件，再挂载路由。

修改后的Express主程序代码：

import express, {Express, Request, Response, Router} from 'express';
import dotenv from 'dotenv';
import ArtistRouter from './routes/artist_routes';
import infoRouter from './routes/info_router';
import bodyParser from 'body-parser';
const cors = require('cors');

dotenv.config();
const app: Express = express();

// 配置CORS，指定允许的Next.js源（默认Next.js运行在3000端口）
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

// 先解析JSON请求体，再处理路由
app.use(bodyParser.json());
app.use(ArtistRouter);
app.use(infoRouter);

// 给端口设置默认值，避免.env未配置时出错
const port = process.env.PORT || 8081;
app.listen(port, () => {
    console.log(`Server started at http://localhost:${port}`);
});

2. 确认CORS配置的准确性 #

• 如果你的Next.js运行在非默认端口（比如3001），需要把origin的值改成对应地址。
• 若需要允许多个源，可以用数组形式：origin: ['http://localhost:3000', 'http://your-production-domain.com']。

3. 验证路由路径匹配 #

检查你的ArtistRouter是否设置了前缀（比如在主程序中是否有app.use('/api', ArtistRouter)）：

• 如果有前缀，Next.js的请求地址应该改为http://localhost:8081/api/artist。
• 如果没有前缀，当前的http://localhost:8081/artist是正确的。

4. 确保Express服务端口正确 #

查看Express启动日志的端口号，确认和Next.js请求中的8081一致。如果.env文件中未配置PORT，代码中添加的|| 8081会自动使用默认端口。

5. 检查路由的响应处理 #

你的路由代码中调用了NewArtists函数，但需要确保该函数最终会向客户端发送响应（比如response.status(201).json({ message: 'Artist created' })），否则请求会一直挂起，可能触发浏览器的超时或跨域相关报错。

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