Axios携带cookie时的跨域问题

用户个人界面通过携带 cookie 发送给后端，后端根据这个 cookie 再返回数据给前端。为了使得前端发送的请求中携带 cookie，只需要在 myAxios.ts 中添加 myAxios.defaults.withCredentials = true;。但是随即登录出现了跨域问题。

后端的 Controller 层已用 @CrossOrigin 注解，但仍然存在跨域问题。

image-20230810191510213

产生原因

查看 CrossOrigin 注解，可以发现默认参数 DEFAULT_ALLOW_CREDENTIALS 为 false，导致后端不能接收到 cookie。

image-20230810193950798

解决办法

解决的办法有两种：

  1. 在 @CrossOrigin 注解中添加 allowCredentials = "true"。

  2. 删除 @CrossOrigin 注解，添加 WebMvcConfig 类，允许所有的请求跨域访问或者指定特定的请求路径进行跨域访问：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @Configuration
    public class WebConfig implements WebMvcConfigurer {

        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("http://localhost:3000") // 允许访问的域
                    .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
                    .allowCredentials(true) // 是否允许发送Cookie信息
                    .maxAge(3600); // 预检请求的有效期，单位为秒
        }
    }

另外需要注意的是，浏览器的同源策略可能不同，例如谷歌不能将127.0.0.1映射到localhost，所以需要保证尽量前后端的路径一致！！！