前端跨域+携带cookie

什么是域

维基百科对域名的解释是：互联网上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位。

域的组成：

什么是跨域？

当一个域去请求另一个域下的资源时就叫跨域。

什么情况下会产生跨域问题？

1. 同一域名，不同端口

http://127.0.0.1:8080
http://127.0.0.1:7070

2. 同一域名，不同协议

http://127.0.0.1/a
https://127.0.0.1/b

3. 域名和对应的ip地址

http://127.0.0.1/b
http://localhost/a

4. 不同域名

http://www.domain1.com/a
http://www.domain2.com/b

如何解决？

• 跨域资源共享（CORS）

//从http://127.0.0.1:8080/home ---请求---> http://127.0.0.1:7777/login

//前端使用axios发送请求
login() {
     axios.post('http://127.0.0.1:7777/login', {
          'username': this.username,
          'password': this.password
     }, {
         withCredentials: true //如果需要携带cookie，就加上这配置
    }).then(res => {
        console.log(res);
	})
}

//后端
@Configuration
public class corsConfig implements WebMvcConfigurer{
    @Bean
    public WebMvcConfigurer corsConfigurer(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://127.0.0.1:8080","http://127.0.0.1:3333") //可以配置多个白名单
                        .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") //允许跨域的请求方法
                        .maxAge(3600) //预检查请求有效期
                        .allowCredentials(true); //如果需要携带cookie就加上此配置
            }
        };
    }
}

参考链接：
什么是预检查请求？
前端常见跨域解决方案