那些年踩过的坑——node代理解决跨域的问题

2024年5月12日 125次阅读 来源: Maybe

在实际开发中，前后端分离的项目通常会需要同后台开发人员联调接口，不可避免的会碰到跨域的问题。虽说跨域问题最后基本都是后台同事解决的，但是有时候为了赶时间，没辙只有自己来，使用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确是空的。
    原文作者：Maybe
    原文地址: https://segmentfault.com/a/1190000017900027
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞