解决跨域问题[前后端分离,前端使用axios]

[size=medium]问题描述:
前端网址:http://h5.xxx.com,后端网址:http://gateway.yyy.com
前端使用axios发送ajax请求到后端,
后端使用Spring Boot,拦截器中查看到每次请求的session id都不一样,每次response的set-cookie中都包含有"SESSIONID"参数,很明显是因为前端没有把sessionid通过cookie传递给后端。[/size]

解决方案
前端请求中增加:

const obj = Object.assign({}, config, {
headers,
withCredentials: true,
crossDomain: true,
});


后端拦截器:

HttpServletResponse servletResponse = (HttpServletResponse) response;
servletResponse.setContentType("application/json; charset=utf-8");
servletResponse.setCharacterEncoding("UTF-8");
// 特别注意:Access-Control-Allow-Origin值不能为*,而应该是一个具体的值
// 否则cookie一样传递不过来
// 这里直接用request.getHeader("Origin"),其实产生的作用跟*基本一致
servletResponse.addHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
servletResponse.addHeader("Access-Control-Allow-Credentials", "true");
servletResponse.addHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With,Cookies");

if (request.getHeader("Access-Control-Request-Method") != null
&& "OPTIONS".equals(request.getMethod())) {// CORS "pre-flight" request
servletResponse.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
servletResponse.addHeader("Access-Control-Max-Age", "7200");
servletResponse.setStatus(200);
servletResponse.getWriter().write("OK");
return;
}


// Add 2018.03.30
[size=medium]这里面还有一个比较大的坑,我们在做IOS微信公众号测试时仍然发现session id每次不一致的情况,但Android微信是OK的。

原因:h5页面通过ajax访问gateway时,IOS的微信端,是无法写入cookie的。但如果先正常通过IOS微信浏览器访问gateway,正常写入cookie后,h5页面再通过ajax访问gateway,此时是可以携带gateway的cookie(即:IOS微信端浏览器对跨域的cookie,是只读模式)

因此,只需要在h5页面访问gateway之前(或者说登录之前),先在h5中location.href指向gateway,再由gateway redirect回来(这个时候,gateway的cookie已经正常写入了)后面的访问就能正常携带cookie了[/size]


response.sendRedirect(request.getHeader("referer"));


[size=medium]参考资料:[url]https://blog.youkuaiyun.com/zhx19920405/article/details/51417250[/url]
感谢大神分享的解决方案[/size]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值