Angular 5 HttpClient发送带Token的Post请求报401未授权？

我之前也碰到过几乎一模一样的问题！当时折腾了好一阵才找到原因，给你几个排查和解决的方向：

1. 优先排查CORS预检请求问题 #

这是最常见的坑！因为浏览器的跨域安全机制，当你发送带自定义头（比如Authorization）的跨域请求时，会先发送一个OPTIONS预检请求，这个请求不会携带任何Token信息。如果后端没有正确处理OPTIONS请求（比如返回401，或者没配置允许跨域的响应头），浏览器就会直接终止后续的POST请求，返回401错误。而curl不受浏览器CORS限制，所以能正常请求。

怎么验证？ #

打开浏览器开发者工具（F12）→ 切换到「网络」标签，看是否有一个OPTIONS请求先于POST请求发送，并且返回了401。如果是这样，问题就出在这里。

解决方法（Java后端为例） #

需要在后端配置CORS，允许OPTIONS请求，并且不对预检请求做Token校验：

• 如果是Spring Boot，可以在接口上添加@CrossOrigin注解：

  @CrossOrigin(origins = "你的前端域名（比如http://localhost:4200）", 
               allowedHeaders = "*", 
               methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.OPTIONS})
  

• 或者全局配置CORS过滤器，确保OPTIONS请求能得到200响应，并且返回正确的跨域头（Access-Control-Allow-Origin、Access-Control-Allow-Headers等）。

2. 检查请求体格式是否与curl一致 #

你的curl命令用-d参数发送数据，默认的Content-Type是application/x-www-form-urlencoded，而Angular的HttpClient.post默认会把数据序列化为JSON，并且设置Content-Type为application/json。如果后端只接受form格式的请求体，就会导致验证失败返回401。

怎么验证？ #

在浏览器开发者工具里看POST请求的Content-Type头，对比curl的请求头（可以用curl -v ...查看详细请求头）。

解决方法 #

如果后端需要form格式，调整Angular的请求代码：

• 方法一：使用FormData

  const formData = new FormData();
  formData.append('text', 'somedata'); // 对应curl里的参数
  const headers = new HttpHeaders().set('Authorization', token);
  
  this.http.post(url, formData, { headers })
    .subscribe(res => console.log(res));
  

• 方法二：手动设置为x-www-form-urlencoded格式

  const data = new HttpParams().set('text', 'somedata');
  const headers = new HttpHeaders()
    .set('Authorization', token)
    .set('Content-Type', 'application/x-www-form-urlencoded');
  
  this.http.post(url, data.toString(), { headers })
    .subscribe(res => console.log(res));
  

3. 确认Token的传递是否完全正确 #

虽然你的代码看起来没问题，但还是要确认：

• Token变量是否有值？可以在代码里console.log(token)看看。
• Token的格式是否符合后端要求？比如很多后端要求Authorization头是Bearer <token>的格式，如果你的token没有加Bearer 前缀，就会验证失败。可以调整代码：

  const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
  

• 浏览器请求头里的Authorization值是否和curl里的完全一致？在开发者工具的请求头里查看对比。

4. 简化HttpClient的响应处理 #

Angular 5的HttpClient默认会自动把响应解析为JSON，所以你原来的.map((response: Response) => response.json())是多余的，甚至可能导致解析错误（因为HttpClient返回的已经是JSON对象，不是Response实例）。可以简化为：

this.http.post(url, data, { headers })
  .subscribe(response => console.log(response));

我当时是CORS预检的问题，后端没配置允许OPTIONS请求，调整后就正常了。你可以先看浏览器的网络请求详情，对比curl和Angular的请求头、请求体，应该能快速找到差异点！

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