Angular 5添加请求头后GET请求变为OPTIONS请求求助

嘿，我帮你捋捋这个问题！你在Chrome开发者工具里看到的OPTIONS请求，其实是浏览器发起的CORS预请求——这是跨域资源共享机制里的安全校验步骤，当你的GET请求满足特定条件时，浏览器会自动先发送OPTIONS请求，用来探测目标服务器是否允许后续的实际GET请求。

下面是最常见的原因和对应的解决办法：

• 跨域场景触发预请求
  如果你的前端页面和请求的API不在同一个域名（包括域名、端口、协议任意一项不同），比如前端跑在http://localhost:3000，API在https://api.yourdomain.com，浏览器就会触发预请求。
  解决办法是在服务器端配置CORS响应头：

  • 必须返回Access-Control-Allow-Origin，值可以是允许的具体域名（比如http://localhost:3000）或者*（不推荐生产环境使用）
  • 确保Access-Control-Allow-Methods包含GET
  • 如果请求里带了自定义头，还要在Access-Control-Allow-Headers里列出这些头
  • 可选配置Access-Control-Max-Age，用来缓存预请求结果，减少重复发送OPTIONS的次数

• 请求包含自定义HTTP头
  如果你给GET请求加了非标准的HTTP头（比如X-User-Token、X-Request-ID这类），浏览器会把这个请求判定为“复杂请求”，从而触发预请求。
  解决办法：要么去掉不必要的自定义头，要么在服务器端的CORS配置里把这些头加入Access-Control-Allow-Headers列表。

• 预请求缓存过期
  浏览器会缓存预请求的结果，当缓存过期后，会重新发送OPTIONS请求。你可以在Chrome开发者工具的Network面板里勾选「Disable cache」，然后重新测试，看是否还会频繁触发OPTIONS。

举个Node.js + Express的CORS配置示例，帮你快速参考：

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

// 配置CORS规则
app.use(cors({
  origin: 'http://localhost:3000', // 替换为你的前端域名
  methods: ['GET', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'X-User-Token'], // 包含你的自定义头
  maxAge: 86400 // 缓存预请求24小时
}));

// 显式处理OPTIONS请求（cors中间件已自动处理，这里是冗余但更清晰的写法）
app.options('*', cors());

// 你的API路由
app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello World!' });
});

app.listen(3001, () => console.log('Server running on port 3001'));

如果还是有问题，你可以在Chrome开发者工具里查看OPTIONS请求的响应：

• 看响应状态码是不是200或204
• 检查响应头里有没有正确返回Access-Control-Allow-Origin等必要字段

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