前后端跨域问题解决方案

本篇文章是基于自己踩的坑记录的一些解决方案，如有错误，敬请指正！

后端框架：SpringBoot
编写跨域 Config

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 覆盖所有请求
        registry.addMapping("/**")
                // 允许发送 Cookie
                .allowCredentials(true)
                // 放行哪些域名（必须用 patterns，否则 * 会和 allowCredentials 冲突）
                .allowedOriginPatterns("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

前端框架：ant design pro
在 requestConfig.js 中加入requestConfig

export const requestConfig: RequestConfig = {
  // 请求地址
  baseURL: 'http://xxxx:9000/api',
  // 允许携带cookie
  withCredentials: true,
  // 请求拦截器
  requestInterceptors: [],

  // 响应拦截器
  responseInterceptors: [],
};

关键点：baseuURL 的xxxx写的是什么，访问的时候就要用什么去访问。
比如你写的是域名，那么访问就要用域名访问，用 IP 地址访问就无法携带 cookie 。
同理，写的是 IP 地址，用域名访问也不会携带 cookie 。
我是将前端和后端部署到了同一台服务器上，再通过以上配置可以解决跨域问题。

对于前后端不在同一台服务器上，我进行了以下尝试：
设前端所在服务器 IP 为 IP1，后端所在服务器 IP 为 IP2，前端项目绑定了域名。

1. 域名解析到 IP2，访问域名可以进入到前端页面，但是登录会报 Network Error
2. 域名解析到 IP1，访问域名可以进入到前端页面，但是发送给后端的请求没有携带cookie，也就是没有解决跨域问题。
   通过 F12 可以看到：
   
   需要通过设置 Cookie 的 SameSite 属性，而这个属性需要配合 Secure 才会生效，也就是只有用 https 协议才会生效。而我的站点没有申请 SSL 证书，因此也就无法尝试了。