后端访问sso后，如何返回前端vue页面（后端redirect跳转，vue代理，axios带参）

由于项目要加上公司的sso，出现的一系列问题，找到解决办法，在此记录一下。可能并不适合其他项目，给个参考。

 

前提：

前端是vue.js，后端springboot

sso配置需要增加公司自己的maven依赖和yml配置。

 

启动项目后，首先访问后端/index接口，进入sso拦截，访问sso页面；登陆成功后返回goto指向的url（也就是index接口的return内容），附上/index接口代码:

@GetMapping(value={"/dist","dist/index"})
public String index(HttpServletRequest request) {
    User user = UserUtils.getCurrentUser(request);
    request.getSession().setAttribute("user", user);
    return "redirect:http://192.168.0.XXX:8081";  //开发环境
//  return "redirect:/loginShow";  //正式环境
}

@RequestMapping("/loginShow")
public ModelAndView loginShow(HttpServletRequest request) {
    ModelAndView modelAndView = new ModelAndView("redirect:/dist/index.html");
    return modelAndView;
}

(其中loginShow方法是用来解决url显示token参数问题的，加上之后sso跳转url的参数隐藏)。

 

这时，前端访问接口报错，跨域问题。

如果是vue2.0，可以在axios的封装类之中加上一句话：

axios.defaults.withCredentials = true;

加在axios.create(...)之前，这句话的作用是访问接口时带着参数，比如token、session。

 

如果是vue3.0，还需要在vue.config.js中的module.exports里面增加proxy代理，如果没有vue.config.js，可以创建一个。代理代码如下：

devServer: {
        proxy: {
            '/api': {
                target: 'http://192.168.0.XXX:8080/XXXXXX',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }

然后，请求基础路径需要都改成和上面的路径一致，比如这里写的'/api'，那么项目中baseUrl的dev或pro路径也要写成'/api'（可以自定义，不用非叫'api'，只要一致就好）。