如何发出跨域请求并随请求发送 cookie
How to make a cross domain request and send cookies with the request
我正在为后端和前端开发 2 个应用程序(spring mvc 和 angular4),我使用 http 在 tomcat 服务器上托管 spring 应用程序端口 (8080) 和我的前端使用 http 端口 (4200) ,这两个应用程序之间的通信是使用 json 进行的。
为了识别我正在使用会话 cookie 的用户。
问题是我遇到了跨域问题,因为我为两个应用程序使用了不同的端口,当我发出 http post 请求时,cookie 没有发送。
到目前为止我找到的唯一解决方案:
当我将 angular 应用程序放入我的 spring 项目的 /src/main/webapp 中时,在 this documentation 之后,我没有遇到问题并且 cookie 会自动设置但是这样做很痛苦每次我想测试某些东西时的前几个步骤。
我在开发过程中也考虑过一些解决方法,例如 jsonp,但我认为这不会产生效果,而且稍后我需要执行一些 e2e 测试。
有没有人idea/example知道如何制作这个跨域...
可以通过代理建立通信。
在package.json中加入"start": "ng serve --proxy-config proxy.config.json"
在"scripts"
中。
在proxy.config.json
中添加:
{
"/api/*": {
"target": "http://server.com:8080",
"secure": false,
"logLevel": "debug"
}
}
所以经过一些研究,我想出了这个解决方案:
就我的后端服务的安全性和可扩展性而言,最好的方法是使用 CROS,任何其他解决方案,如 JSONP,Proxy 只是一种解决方法,这不会带来任何好处,因为 同源策略 其次是浏览器
以下 this documentation 将会发生的情况:
1)浏览器会发送一个OPTIONAL请求
2)服务器将响应允许的来源
3) 如果我们的域(在我的例子中是前端域/ angular 应用程序)被验证,cookie 将自动发送到另一个请求
我所做的实施:
在 spring 应用中:
//Some logic before this
if ("OPTIONS".equals(request.getMethod())) {
response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
response.setHeader("Access-Control-Allow-Credentials","true");
response.setHeader("Access-Control-Allow-Methods","POST");
response.setHeader("Access-Control-Allow-Headers","Content-Type");
response.setStatus(HttpServletResponse.SC_OK);
((HttpServletResponse) servletResponse).setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
return ;
}
// some logic after this
在前面的应用程序中,我们可以像附件 link 中描述的那样使用 xhr 发送请求。
我正在为后端和前端开发 2 个应用程序(spring mvc 和 angular4),我使用 http 在 tomcat 服务器上托管 spring 应用程序端口 (8080) 和我的前端使用 http 端口 (4200) ,这两个应用程序之间的通信是使用 json 进行的。 为了识别我正在使用会话 cookie 的用户。
问题是我遇到了跨域问题,因为我为两个应用程序使用了不同的端口,当我发出 http post 请求时,cookie 没有发送。
到目前为止我找到的唯一解决方案: 当我将 angular 应用程序放入我的 spring 项目的 /src/main/webapp 中时,在 this documentation 之后,我没有遇到问题并且 cookie 会自动设置但是这样做很痛苦每次我想测试某些东西时的前几个步骤。
我在开发过程中也考虑过一些解决方法,例如 jsonp,但我认为这不会产生效果,而且稍后我需要执行一些 e2e 测试。
有没有人idea/example知道如何制作这个跨域...
可以通过代理建立通信。
在package.json中加入"start": "ng serve --proxy-config proxy.config.json"
在"scripts"
中。
在proxy.config.json
中添加:
{
"/api/*": {
"target": "http://server.com:8080",
"secure": false,
"logLevel": "debug"
}
}
所以经过一些研究,我想出了这个解决方案: 就我的后端服务的安全性和可扩展性而言,最好的方法是使用 CROS,任何其他解决方案,如 JSONP,Proxy 只是一种解决方法,这不会带来任何好处,因为 同源策略 其次是浏览器
以下 this documentation 将会发生的情况: 1)浏览器会发送一个OPTIONAL请求 2)服务器将响应允许的来源 3) 如果我们的域(在我的例子中是前端域/ angular 应用程序)被验证,cookie 将自动发送到另一个请求
我所做的实施: 在 spring 应用中:
//Some logic before this
if ("OPTIONS".equals(request.getMethod())) {
response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
response.setHeader("Access-Control-Allow-Credentials","true");
response.setHeader("Access-Control-Allow-Methods","POST");
response.setHeader("Access-Control-Allow-Headers","Content-Type");
response.setStatus(HttpServletResponse.SC_OK);
((HttpServletResponse) servletResponse).setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
return ;
}
// some logic after this
在前面的应用程序中,我们可以像附件 link 中描述的那样使用 xhr 发送请求。