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

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

 

Logo

前往低代码交流专区

更多推荐