最近在做项目时,发现vue前端的登录接口使用axios连接服务器实现登录功能时,每次请求后端服务器所保存的Session对象id都不相同,也就是说前端请求服务器所得到的Seesion对象无法保存下来。
       上网查询后发现是跨域问题,也就是说请求的发出点的URL与所请求的URL不同源。(所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port))。
       那么如何解决跨域问题呢,目前网络上主要有两种解决方案:

1.允许使用cookie,携带session信息,保持session的一致性。

在vue项目中的main.js中添加(前提是已引用axios):

axios.defaults.withcredentials = true;  //允许使用cookie

在后端代码中同样允许使用cookie(以SpringMVC为例)

//作为Controller类的注解
@CrossOrigin(origins ="http://localhost:8081",allowCredentials = "true") //允许跨域,同时允许使用cookie

在这里插入图片描述

2.使用 vue proxy 代理——将不同源的URL通过代理更改为同源

以vue-cli3为例,在vue项目根目录下创建配置文件vue.config.js(与package.json同级),在配置文件中添加以下代码:

module.exports = {
    //相当于webpack-dev-server,  对本地服务器进行配置
    devServer : {
         proxy:  {
         //以“/a”作为开头的axios请求都会进行代理
            "/a" : {   
                 target: "http://localhost:8080",  //请求目标服务器的url
                 changeOrigin: true,        //是否跨域(选为true)
                 pathRewrite: {
                     "^/a" : ""   //将axios请求url中的/a进行重写
                 }    
            }
        }
    }     
    //通过以上配置,对于axios请求:/a/login 将会被代理成 http://localhost:8080/login
}
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐