我有一个运行在localhost:8080上的REST后端,当用户登录时它会发出cookie。我有一个与后端打包在一起的Angular2前端。当我运行项目时,angular发送cookie并将自定义标头附加到对后端的请求。但是,当我使用列表服务器一个localhost: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
使用lite-server和apache2运行
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过滤器,可以接受来自任何来源的所有请求。
该问题与lite服务器无关。每当您在与后端不同的端口/域上运行前端时,都需要明确允许某些行为发生,例如设置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 Service包装器,将其附加到每个请求。
为了使angular能够读取后端发送的自定义标头,CORS需要发送以下标头:
Access-Control-Expose-Headers:X-CUSTOM-HEADER
只有这样,它才会暴露在角度下。希望这对某人有帮助。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句