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

背景:前端使用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)

/**
 * @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
})

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