Angular 5代码中请求头未随请求发送的原因咨询

嘿，我来帮你搞定这个问题！你的代码里有几个容易踩的坑，咱们一个个捋清楚：

1. HttpHeaders是不可变对象，append后必须重新赋值 #

Angular的HttpHeaders实例是不可变的——调用append()方法不会修改原来的headers对象，而是返回一个包含新头的全新实例。你原来的代码只是调用了append()但没把新实例赋值回去，所以最后用的还是空的headers！

修正写法：

let headers = new HttpHeaders();
// 关键：把append返回的新对象重新赋值给headers
headers = headers.append('command', 'ProcessLoginPos');

2. Access-Control-Allow-Origin是响应头，别往请求里加 #

这个头是服务器返回给浏览器用的，用来允许跨域请求，前端请求里加这个头完全没用，浏览器甚至会直接忽略它。直接删掉这行代码就好。

3. HttpRequest的headers配置要写完整 #

看你代码最后{ 'headers...应该是没写完，正确的配置是把headers对象放到headers属性里，比如：

const req = new HttpRequest('POST', 'http://localhost:8080/ProjectOne/', formData, { 
  headers: headers
});

完整修正后的代码 #

loginUser(email,password){ 
  console.log("loginuser"); 
  let formData:FormData = new FormData(); 
  formData.append("format","json"); 
  formData.append("email",email); 
  formData.append("password",password); 

  let headers = new HttpHeaders();
  // 重新赋值headers，保留需要的请求头
  headers = headers.append('command', 'ProcessLoginPos'); 

  const req = new HttpRequest('POST', 'http://localhost:8080/ProjectOne/', formData, { 
    headers: headers
  });

  // 别忘了发送请求，比如通过HttpClient执行：
  // return this.http.request(req);
}

额外提示：如果遇到跨域问题 #

如果之后浏览器报CORS相关错误，那得在你的后端服务器配置Access-Control-Allow-Origin响应头，而不是在前端请求里折腾。比如在Java后端可以通过过滤器或者注解配置，Node.js可以用cors中间件。

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