Angular 2跨域发送Cookie问题：请求头中无法找到Cookie

兄弟，我太懂你这种跨域Cookie发不出去、请求头里根本看不到它的憋屈了！之前我也踩过一模一样的坑，这事儿真不是前端单方面能搞定的，得前后端配合才行，我给你把步骤说清楚：

一、前端Angular配置：开启凭证携带 #

不管你用的是Angular 2原生的Http模块，还是后来升级的HttpClient，核心都是要在请求选项里打开withCredentials，告诉浏览器要携带Cookie这类凭证。

1. 用Angular 2原生Http模块的写法 #

import { Http, Headers, RequestOptions } from '@angular/http';

// 构建请求选项
const headers = new Headers({ 'Content-Type': 'application/json' });
const requestOptions = new RequestOptions({
  headers: headers,
  withCredentials: true // 关键配置，必须设为true
});

// 发起跨域请求
this.http.post('https://你的后端接口域名/api/xxx', 请求数据, requestOptions)
  .subscribe(response => {
    // 处理返回结果
  }, error => {
    // 处理错误
  });

2. 升级到HttpClient后的写法（如果项目有更新的话） #

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

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
  withCredentials: true // 同样要开这个开关
};

this.httpClient.post('https://你的后端接口域名/api/xxx', 请求数据, httpOptions)
  .subscribe(response => {
    // 处理返回结果
  });

二、后端必须配置的CORS响应头 #

这一步是很多人忽略的！光前端开了withCredentials没用，后端必须配合设置正确的跨域头，浏览器才会允许Cookie跨域传递：

• Access-Control-Allow-Origin: 必须设置为你的前端具体域名（比如http://localhost:4200），绝对不能用*通配符！带凭证的跨域请求不允许用通配符。
• Access-Control-Allow-Credentials: 必须设为true，明确告诉浏览器允许携带凭证。
• 额外：如果你的请求用了自定义头或者特殊请求方法，还要配置Access-Control-Allow-Headers和Access-Control-Allow-Methods，不过核心是前两个。

举个Node.js/Express后端的配置例子：

app.use((req, res, next) => {
  // 替换成你的前端实际域名
  res.header('Access-Control-Allow-Origin', 'http://localhost:4200');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  next();
});

三、容易踩的坑要注意 #

• 别用*当Access-Control-Allow-Origin：这是最常见的错误，浏览器直接会拦截带Cookie的跨域请求。
• Cookie的Domain和Path要正确：确保后端设置Cookie时，Domain是前端域名的父域或者相同域名，Path也要匹配（一般设为/就行）。
• 检查浏览器隐私设置：如果浏览器开了“阻止第三方Cookie”，那跨域Cookie肯定发不出去，记得检查这个设置。
• 预检请求（OPTIONS）要正确响应：浏览器会先发送OPTIONS请求试探，后端必须给OPTIONS请求也返回正确的CORS头，不然实际请求会被拦截。

按照上面的步骤来，前后端都配置好，跨域请求里的Cookie应该就能正常出现在请求头里啦！

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