前端跨域+携带cookie

古城微笑少年丶 2022-12-25 05:54 178阅读 0赞

##### 什么是域 #####

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

域的组成：  
![在这里插入图片描述][20201130200308746.png]

##### 什么是跨域？ #####

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

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

1.  同一域名，不同端口

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

1.  同一域名，不同协议

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

1.  域名和对应的ip地址

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

1.  不同域名

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就加上此配置
                }
            };
        }
    }

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

[20201130200308746.png]: /images/20221120/3785c4f5609948cebe2d7792422d9e38.png
[Link 1]: https://www.cnblogs.com/zgddan/p/12050050.html
[Link 2]: https://segmentfault.com/a/1190000011145364