配置跨域头后仍出现Cross-Origin Request Blocked错误如何解决

核心问题点 #

• Express端CORS配置冲突：同时使用cors库和手动设置CORS响应头，两个规则不一致，且开启Access-Control-Allow-Credentials: true时不能设置Access-Control-Allow-Origin: *，浏览器会直接拦截跨域请求
• 无效路由配置：app.get('http://localhost:8081', ...)语法错误，Express路由第一个参数应为服务端路径，不能写前端地址，该行配置完全无效
• 前端请求配置错误：axios自定义了Access-Control-Allow-Origin请求头，该头属于服务端响应头，前端无需设置，额外添加会触发预检请求校验失败
• 服务端口不匹配：前端请求的baseURL默认指向80端口，如果你的Express服务没有监听80端口，会导致请求指向错误的服务，触发跨域报错（队友本地可能将Node服务跑在80端口，或做了端口映射所以没有问题）

修复步骤 #

1. 清理Express端CORS配置 #

删除原有所有CORS相关代码（包括cors库初始化代码、手动设置响应头的中间件、无效的app.get路由），替换为统一配置：

const cors = require('cors');
const corsOptions = {
  origin: 'http://localhost:8081',
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'PUT', 'DELETE']
}
// 全局启用CORS，注意这段配置要放在所有路由注册之前
app.use(cors(corsOptions));
// 处理所有预检请求
app.options('*', cors(corsOptions));

2. 修正前端axios配置 #

删除apiClient创建配置中headers下的两行无效参数：

// 删除以下两行无效配置
"Access-Control-Allow-Origin" : "*",
crossDomain: true

3. 修正服务地址配置 #

确认你的Express服务监听的端口，比如如果你的Express服务监听3000端口，需要将前端开发环境的baseURL修改为对应地址：

if (process.env.NODE_ENV === "development") {
  baseurl = "http://localhost:3000/api/"; // 替换为你实际的Node服务端口
}

4. 本地环境校验 #

• 检查本地hosts文件，确认localhost指向127.0.0.1
• 清空浏览器缓存或使用无痕模式测试，避免旧的CORS预检缓存影响结果

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