解决跨域问题[前后端分离,前端使用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.csdn.net/zhx19920405/article/details/51417250[/url]
感谢大神分享的解决方案[/size]
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在前后分离的开发模式下,前端和后是独立的两个系统,前端向后发送请求时,常常会遇到问题。为了解决这个问题,我们可以在后进行配置,也可以在前端进行请求。 1. 后配置 在后,可以使用 Spring Boot、Node.js、Django 等框架,在配置文件中增加配置,比如在 Spring Boot 中,可以在 application.properties 或 application.yml 中增加以下配置: ``` # 允许所有访问 spring.mvc.crossorigin.allowed-origins=* ``` 2. 前端请求 在前端,可以使用以下几种方式解决问题: 2.1 代理请求 通过在前端配置代理服务器,将前端的请求转发到后服务器上,从而避免问题。比如在 Vue.js 中,可以使用 vue-cli-service 的 proxyTable 配置实现代理请求: ``` // vue.config.js module.exports = { devServer: { proxy: { // 将请求转发到后服务器上 '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 2.2 JSONP 请求 JSONP 请求是一种利用 script 标签的技术,通过在前端页面中动态创建 script 标签,然后在后返回一个 JSONP 回调函数,前端就可以获取到后数据了。比如在 Vue.js 中,可以使用 axios-jsonp 库实现 JSONP 请求: ``` // 安装 axios-jsonp 库 npm install axios-jsonp --save // 使用 axios-jsonp 库发送 JSONP 请求 import axiosJsonp from 'axios-jsonp'; axios({ url: 'http://example.com', adapter: axiosJsonp }) .then(response => { console.log(response); }) .catch(error => { console.error(error); }); ``` 2.3 CORS 请求 CORS 请求是一种支持的 HTTP 请求,前端可以在请求头中增加 Origin 字段,后可以在响应头中增加 Access-Control-Allow-Origin 字段,从而允许请求。比如在 Vue.js 中,可以使用 axios 库发送 CORS 请求: ``` // 使用 axios 库发送 CORS 请求 axios({ method: 'get', url: 'http://example.com', headers: { 'Origin': 'http://localhost:8080' } }) .then(response => { console.log(response); }) .catch(error => { console.error(error); }); ``` 以上是解决前后分离问题的几种方案,具体选择哪种方案需要根据项目实际情况来决定。需要注意的是,在使用代理请求时,应该避免将代理服务器暴露在公网上,以避免安全问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值