Angular 4自定义HTTP请求头sessionToken未生效致CORS报错咨询

我来帮你拆解下遇到的两个核心问题，以及对应的修复思路：

1. 为什么请求头显示为lazyUpdate这类内部结构？ #

Angular 4中的HttpHeaders是不可变对象，它采用了惰性初始化的设计——你调用append()方法时，并不会立即修改原对象，而是生成一个包含更新操作的新对象，这些操作暂时存在lazyUpdate数组里，直到实际发送请求时才会被应用，生成最终的请求头。

你当前的写法headers = headers.append('sessionToken', token)是正确的，控制台输出的只是HttpHeaders的内部状态，并非实际发送给服务器的请求头内容，这部分其实不是导致报错的原因。

2. 为什么服务器提示sessiontoken不在CORS允许列表中？ #

报错信息里的sessiontoken是全小写的，而你设置的请求头是驼峰式的sessionToken，这就是问题的关键：

• 当你发送带自定义请求头的跨域请求时，浏览器会先发送一个OPTIONS预检请求，其中会包含Access-Control-Request-Headers: sessiontoken（浏览器会自动将header名转为小写）。
• 如果你的服务器配置的Access-Control-Allow-Headers中只包含sessionToken（驼峰），或者没有包含这个header的任何大小写形式，服务器就会返回你看到的错误，同时浏览器会阻止后续的实际请求发送，导致你的sessionToken根本没传到服务器。

修复方案 #

方案一：统一请求头名称的大小写 #

将前后端的header名称统一为相同格式，比如全小写：

// Angular端修改为小写
let headers = new HttpHeaders(); 
headers = headers.append('sessiontoken', token);

同时确保服务器的Access-Control-Allow-Headers配置中包含sessiontoken。

方案二：调整服务器CORS配置 #

如果要保留驼峰式的sessionToken，需要在服务器的CORS配置中明确添加这个header（部分服务器对header大小写敏感），比如：

Access-Control-Allow-Headers: Content-Type, sessionToken

另外，如果你使用的是带凭证（比如Cookie）的跨域请求，Access-Control-Allow-Headers不能设置为*，必须明确列出允许的header名称。

方案三：简化HttpHeaders的创建方式 #

你可以用更简洁的方式创建headers，避免多次赋值的潜在问题：

// 方式1：链式调用
const headers = new HttpHeaders().append('sessionToken', token);

// 方式2：直接传入对象初始化
const headers = new HttpHeaders({ 'sessionToken': token });

内容的提问来源于stack exchange，提问作者Serhio g. Lazin