【问题贴】springboot+前后分离+各种跨域+整合cas

最近接触到了sso遇到了一个问题,我大致描述下情况,记录下问题,方便以后查阅,小白帖不定期更新。

如若对cas,sso等没有一定的了解,至此劝退,不浪费阅读时间

下面,请开始思维碰撞的表演:

背景:所有项目都在本地测试,故cas端口8080,前后端不分离项目端口8081,前后分离项目后端springboot端口8082(各种项目,分离,不分离,各种框架,均要整合sso......)至此,项目背景大致介绍完毕。

问题:前后分离的项目,代号A。A项目用Nginx作为前端容器,另通过反向代理,解决了和后端跨域的问题。A项目某个页面,有个按钮,会请求后端api,如果,不整合cas,情况应该是登录、认证巴拉巴拉一顿操作,我请求api,拿到数据;但是整合cas后,得先去cas认证,认证通过后,你才可以拿到数据。

整合cas后,我到A的index.html页面,点击按钮或者其他,发送ajax请求,ajax请求到A后端后,cas-filter拦截,发现没认证,302到cas登录页,在这个过程中,你之前发起的ajax请求其实被redirect到了cas的login.html页面。

本以为,cas登录完事后,会重新给我302到A的index.html,之后我请求api,应该不再是302,而是给我200,返回正常的数据。然鹅,事实是,浏览器没有跳转,只是帮我去请求了cas的登录页,把页面数据给我返回了过来。。。本质是,ajax不支持重定向。

尽管,随后对页面js进行改造, 通过获取响应头的content-type来判断是不是把网页请求过来了,进而通过location跳转。改造后,可以跳转到cas登录页,也可以登录,回调也正常。然鹅,悲剧的是,点击按钮发送的ajax请求,仍然不能获取结果集,还是在302,因为第一次从cas回调过来时候,有st,所以这次302到cas后,cas认证通过,又给跳转回来。再点击,还是这样,这是一个死循环。

之后,通过调试发现,index.html页面请求的api,没有获取到session,浏览器的cookie里空空如也。因为没有session,所以,在过A的后端时候,cas-filter直接就认为是未登陆,给302到cas了,但是因为有st,所以,cas认为这次认证ok,又给回调回来。结果就是,cookie里空空如也啊。。。。。。

现在就是纠结cookie的里没有sessionid,不知道具体什么情况,也不知道页面通过判定响应头类型靠谱不。哎,目前就是这样。

假定,之前做的都是对的。那么,cookie为何为空,也就是为啥没生成session。。。

仍需要埋头苦干啊。。。

拓展链接:https://segmentfault.com/a/1190000015235402


哈哈哈,经过一番努力,前后分离的问题,解决啦~~

痛苦三天,就今天开心~.~

拓展链接:https://blog.csdn.net/qq_21251983/article/details/87631991 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
Spring Boot和Vue前后端分离的项目中,当前端Vue通过ajax或axios请求后端的API时,会经常遇到跨域问题跨域是由于同源策略(Same Origin Policy)导致的,即浏览器限制了在不同源之间进行通信(不同源指协议、域名、端口号任意一个不同)。解决跨域问题的方法有很多,这里介绍一种常见的处理方式。 在Spring Boot后端配置中,我们可以通过添加一个跨域配置类来实现对请求跨域的处理。首先创建一个类,命名为CorsConfig(跨域配置类名可自定义),并在该类上加上@Configuration注解。然后在类中添加一个方法addCorsMappings,使用@CrossOrigin注解配置允许跨域的规则。例如可以设置允许所有来源(origin)、所有方法(methods)和所有请求头部(allowedHeaders),如下所示: @Configuration public class CorsConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*") .allowedHeaders("*"); } }; } } 这样就实现了对所有请求的跨域访问授权。在allowedOrigins方法中可配置指定的允许来源,如指定某个特定的域名;allowedMethods方法可配置允许的请求方法,如GET、POST等;allowedHeaders方法可配置允许携带的请求头信息。 在Vue前端项目中,可以在开发环境中通过配置代理实现请求转发来解决跨域问题。在vue.config.js(Vue的配置文件)中,添加以下代码: module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 后端API地址 ws: true, changeOrigin: true } } } } 以上代码表示将以/api开头的请求转发到http://localhost:8080地址,并开启WebSocket和改变请求的源地址。这样前端项目就可以通过/api访问后端API,而不用担心跨域问题。 这样,我们就能够很方便地解决Spring Boot和Vue前后端分离项目中的请求API跨域问题
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值