带有精简服务器的 Angular2 不会附加自定义标头或 cookie

Question

我有一个在localhost：8080上运行的REST后端，当用户登录时发出cookie。 我有一个 Angular2 前端与后端打包在一起。 当我运行项目时，angular 发送 cookie 并将自定义标头附加到后端的请求。 但是，当我使用列表服务器一个本地主机：3000 运行前端时，angular 不会发送任何 cookie，也不会附加自定义标头。

使用后端运行时的请求：

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:io=8Dk6ajOQZyDz-bvXAAAB; jwt=eyJh...H1aCccT2U
Host:localhost:8080
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36
X-CSRF-Token:2c8744ff-38ad-49cb-bf07-fe75cd16f827

使用精简服务器和 apache 运行2

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:x-csrf-token
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36

从我读到的内容来看，cookie 不是特定于端口的，因此应该与来自 localhost：3000 和 localhost：8080 的请求一起发送。

我在后端有一个 CORS 过滤器来接受来自任何来源的所有请求。

1. 为什么不附加标头？
2. 为什么没有附加饼干？

Answer 1

该问题与

精简服务器无关。 每当您在与后端不同的端口/域上运行前端时，您都需要明确允许某些行为发生，例如设置 cookie 或允许读取标头。

要获取后端设置的cookie以存储在浏览器中，角度请求必须与withCredentials一起发送，这将以下标头附加到请求中。

Access-Control-Allow-Credentials:true
this.http.post(this.loginUrl,
        JSON.stringify({ username: username, password: password }),
        {headers: this.headers, withCredentials: true})...

我已经设置了一个 HTTP 服务包装器，将其附加到每个请求。

要使角度读取后端发送的自定义标头，CORS 需要发送以下标头：

Access-Control-Expose-Headers:X-CUSTOM-HEADER

只有这样，它才会暴露在棱角下。 希望这对某人有所帮助。