Angular 5自定义HTTP请求头发送异常问题咨询

看起来你遇到的是浏览器CORS（跨域资源共享）机制的正常行为，我来帮你拆解问题并给出解决方案：

为什么会看到OPTIONS请求？ #

当你的前端发送包含自定义HTTP头（比如X-fastgate-resource）的跨域请求时，浏览器会自动触发预检请求（也就是你看到的OPTIONS请求）。这个请求的作用是提前询问目标网关/服务器：

我接下来要发送的请求会使用这些方法、头信息，你允许我这么做吗？

你看到的Access-Control-Request-Headers: x-fastgate-resource就是浏览器在告知网关：后续的实际请求会携带这个自定义头，请确认是否允许。

解决步骤 #

1. 配置网关的CORS响应头 #

问题的核心是要让网关正确处理OPTIONS预检请求，并返回允许自定义头的响应。你需要确保网关返回以下关键响应头：

• Access-Control-Allow-Origin: 设置为你的前端域名（比如https://your-frontend-app.com，生产环境不建议用*，如果需要携带Cookie的话必须指定具体域名）
• Access-Control-Allow-Headers: 必须包含你的自定义头X-fastgate-resource，可以同时加上其他常用头比如Content-Type
• Access-Control-Allow-Methods: 明确允许GET（以及你需要的其他HTTP方法）
• Access-Control-Max-Age: 可选，用来缓存预检结果的时间（比如3600秒），减少重复发送OPTIONS请求的次数

示例响应头配置：

Access-Control-Allow-Origin: https://your-frontend-domain.com
Access-Control-Allow-Headers: X-fastgate-resource, Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Max-Age: 3600

2. 优化Angular代码（可选但推荐） #

你的现有代码逻辑是对的，但Angular在版本4之后推出了更简洁的HttpClient服务，替代旧的Http。推荐升级写法，代码更清晰：

import { HttpClient, HttpHeaders } from '@angular/common/http';

// 在组件/service的构造函数注入HttpClient
constructor(private http: HttpClient) {}

getXById(id: number) {
  // 构造自定义请求头
  const requestHeaders = new HttpHeaders({
    'X-fastgate-resource': 'resource_name'
  });
  
  // 发送GET请求，携带头信息
  return this.http.get(`${http://url}/resource`, { headers: requestHeaders });
}

3. 验证实际请求 #

当网关配置正确后，浏览器收到预检请求的允许响应，就会发送实际的GET请求。此时你可以在浏览器开发者工具的Network面板中，找到那个GET请求（不是OPTIONS），查看它的Request Headers，就能看到X-fastgate-resource: resource_name已经被正确携带了。

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