在实际开发中,前后端分离的项目通常会需要同后台开发人员联调接口,不可避免的会碰到跨域的问题。虽说跨域问题最后基本都是后台同事解决的,但是有时候为了赶时间,没辙只有自己来,使用 node 代理解决
跨域:协议 域名 端口号 三个只要有一个不一样就是跨域,也就是不同域名之间的访问;
通常解决跨域的方法 前端 jsonp 请求 或者 node 代理
后台配置拦截器或者使用 注解 @CrossOrigin(我自己写的基本都是用的整个 配置成 * 放开所有的请求,反正也是写着玩玩的)
前端 vue 全家桶一条龙服务,后台 ssm
首先在 vue 项目中 在 config 目录下 index.js
proxyTable: {
‘/api’: {
target: ‘http://localhosst:8080/Maybe/’, // 接口域名
changeOrigin: true, // 是否跨域
// pathRewrite: {
// ‘^/api’: ” // 需要 rewrite 的,
// }
}
},
然后将 axios 的 baseURL 设置为 ’/api’ 然后跨域的问题就解决了
(ps: 封装 axios 的时候 记得一定要携带 cookie
axios.defaults.withCredentials=true // 请求携带 cookie
不然后端取到的 session 也是空的
)
但是这个时候 会出现一个问题 session 丢失的问题,接口是通的,但是后端却取到的 session 确是空的
解决方法
proxyTable: {
‘/Maybe’: {
target: ‘http://localhosst:8080/’, // 接口域名
changeOrigin: true, // 是否跨域
// pathRewrite: {
// ‘^/api’: ” // 需要 rewrite 的,
// }
}
},
注意:代理名要与 application context 相同;跨域 changeOrigin: true;RewritePath,是将对资源的请求重定向到另一路径,使其不同于所请求 URL 指示的路径,根据实际情况看要不要加。
其实真正的 session 路径在 /Maybe 下, 但是上面这个请求虽然被代理到 http://localhosst:8080/Maybe,很明显的请求 http://localhosst:8080/api/Maybe 所携带的 cookie 在 /api 路径下面,在 /api 路径找 /Maybe 下 cookie 肯定是找不到的啦,所以就出现了虽然能访问到接口,但取到的 session 确是空的。