springboot+vue前后端分离解决本地联调跨域和cookie问题

水深无声 2023-07-07 12:55 49阅读 0赞

**背景**:前端使用vue搭建的单独项目，后端使用springboot搭建的单独项目。在本地同一台机器上联调的时候，自己需要启动前端和后端两个项目，vue启动9527端口，springboot启动8083端口，导致跨域问题，跨域导致cookie传递出现问题。

**产生的问题**：1.本地不同端口怎么联调？2.怎么解决跨域问题？3.怎么解决跨域导致cookie丢失的问题？

### 1.本地不同端口怎么联调？ ###

前端启动一个端口后比如9527，后端启动一个不同的端口比如8083

前端项目vue使用的axios，然后在前端里面设置后端接口的baseUrl，就可以前后端联通了。

const service = axios.create({
      baseURL: 'http://127.0.0.1:8083'
    })

### 2.怎么解决跨域问题？ ###

首先一点：跨域问题后端解决。如下代码轻松解决：(后端有四种方式可以解决跨域问题，这里提供最简单的一种，想了解其他的方式请参考：[https://blog.csdn.net/Mint6/article/details/104726325][https_blog.csdn.net_Mint6_article_details_104726325])

/**
     * @Auther: Administrator
     * @Date: 2020/2/23 22:09
     * @Description:
     */
    @Configuration
    public class WebMvcConfg implements WebMvcConfigurer {
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            //设置允许跨域的路径
            registry.addMapping("/**")
                    //设置允许跨域请求的域名
                    //当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
                    .allowedOrigins("http://localhost:9527")
                    //是否允许证书 不再默认开启
                    .allowCredentials(true)
                    //设置允许的方法
                    .allowedMethods("*")
                    //跨域允许时间
                    .maxAge(3600);
        }
    
    }

### 3.怎么解决跨域导致cookie丢失的问题？ ###

**首先**修改第二个问题的后端代码：.allowedOrigins("http://localhost:9527") 这里不能写 \* ，要用前端项目实际的http://ip:端口号填写

**其次**修改前端代码：axios里面withCredentials，就是第一步axios基本设置的地方，设置为true

const service = axios.create({
      baseURL: 'http://127.0.0.1:8083',
      withCredentials: true
    })

好了，到这里为止，前后端分离项目本地联调就没问题啦。

[https_blog.csdn.net_Mint6_article_details_104726325]: https://blog.csdn.net/Mint6/article/details/104726325