Angular 6 HttpClient带凭证Post请求技术咨询（附服务代码片段）

嗨，我来帮你搞定这个问题～要在Angular 6里用HttpClient发送带凭证（比如Cookie、HTTP认证信息）的POST请求，核心就是开启withCredentials配置项，下面一步步给你说明：

1. 理解关键配置 #

当你需要请求携带凭证时，必须在请求配置里添加withCredentials: true，这样浏览器才会在请求中包含相关凭证（跨域场景下还需要后端配合配置，后面会提到）。

2. 修改你的ApiService代码 #

根据你的现有代码，有两种方式来配置带凭证的请求：

方式一：修改全局httpOptions（适合多个请求都需要带凭证的场景） #

直接在你定义的httpOptions里加入withCredentials：

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

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
  withCredentials: true // 新增这一行，开启凭证携带
};

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) { }

  create() {
    const postedData = { userid: 1, title: 'title here', body: 'body text' };
    // 替换成你的实际API接口地址
    const apiEndpoint = 'https://your-api-url.com/records';
    return this.http.post(apiEndpoint, postedData, httpOptions);
  }
}

方式二：单个请求单独配置（适合仅部分请求需要带凭证的场景） #

如果不想修改全局配置，可以在post方法的第三个参数里直接传入带withCredentials的配置：

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

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) { }

  create() {
    const postedData = { userid: 1, title: 'title here', body: 'body text' };
    const apiEndpoint = 'https://your-api-url.com/records';
    
    return this.http.post(apiEndpoint, postedData, {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
      withCredentials: true // 仅这个请求开启凭证携带
    });
  }
}

3. 后端配合配置（重要！） #

如果是跨域请求，你的后端必须同时配置以下响应头，否则浏览器会拦截携带凭证的请求：

• Access-Control-Allow-Credentials: true
• Access-Control-Allow-Origin 不能设为*，必须是你的前端域名（比如http://localhost:4200）

额外提示 #

• Angular 6的HttpClient在withCredentials配置上和后续版本（比如Angular 7+）是一致的，所以这个方案也适用于更高版本的Angular。
• 如果你的请求是表单数据（而非JSON），可以调整Content-Type为multipart/form-data或者application/x-www-form-urlencoded，但withCredentials的配置逻辑不变。

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