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
})

好了，到這裏爲止，前後端分離項目本地聯調就沒問題啦。