开启CORS后Express.js PUT路由被Angular调用两次的问题

原因 #

这并非Angular与CORS的兼容问题，核心问题出在跨域凭证规则不匹配，导致浏览器或Angular HttpClient触发了重复请求：

1. 后端开启了credentials: true的CORS配置，但前端Angular请求未设置withCredentials: true，浏览器因安全规则拒绝接收响应，HttpClient自动重试PUT请求，导致后端收到两次请求。
2. 你使用正则表达式匹配Origin的方式存在模糊性，可能导致预检请求（OPTIONS）的响应不符合浏览器预期，间接触发重复请求。

解决方案 #

方案1：在Angular请求中添加withCredentials配置

修改Angular的PUT请求，明确设置跨域凭证参数，与后端配置对应：

constructor(private http: HttpClient) {
  this.http.put('http://localhost:5000', {}, { withCredentials: true }).subscribe();
}

此配置会让浏览器正确处理跨域凭证，避免因响应规则不匹配触发重试。

方案2：优化Express的CORS配置

将模糊的正则匹配改为明确的允许源，同时通过函数方式更精准地处理Origin校验：

import express from 'express';
import cors from 'cors';

const app = express();

// 明确指定允许的前端源（Angular默认开发端口为4200）
const allowedOrigins = [
  'http://localhost:4200',
  'https://localhost:4200',
  'http://127.0.0.1:4200',
  'https://127.0.0.1:4200'
];

app.use(
  cors({
    origin: (origin, callback) => {
      // 允许无Origin的请求（如curl测试）
      if (!origin || allowedOrigins.includes(origin)) {
        callback(null, true);
      } else {
        callback(new Error('Not allowed by CORS'));
      }
    },
    credentials: true
  })
);

app.put('/', (req, res, next) => {
  console.log('PUT REQUEST');
  res.status(200).json({});
});

app.listen(5000, () => {
  console.log('Server is running on port 5000');
});

该方式避免了正则匹配可能带来的意外问题，确保预检请求能正确通过。

方案3：排查前端重复请求触发逻辑

检查Angular代码是否存在重复调用请求的情况（如组件constructor和ngOnInit都触发了请求，或开发模式热重载导致组件重复初始化），可添加日志确认：

constructor(private http: HttpClient) {
  console.log('发送PUT请求');
  this.http.put('http://localhost:5000', {}, { withCredentials: true })
    .subscribe({
      next: () => console.log('请求成功'),
      error: (err) => console.log('请求失败', err)
    });
}

若前端日志显示两次"发送PUT请求"，则需修正前端代码逻辑。

关键规则说明 #

使用带凭证的CORS时，必须同时满足以下条件：

• 后端设置Access-Control-Allow-Credentials: true
• 后端Access-Control-Allow-Origin不能是通配符*，必须是具体源或精准匹配的规则
• 前端请求必须设置withCredentials: true

违反任何一条都会触发浏览器的安全限制，导致请求异常。

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