本篇文章是基于自己踩的坑记录的一些解决方案,如有错误,敬请指正!
后端框架: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,前端项目绑定了域名。
- 域名解析到 IP2,访问域名可以进入到前端页面,但是登录会报 Network Error
- 域名解析到 IP1,访问域名可以进入到前端页面,但是发送给后端的请求没有携带cookie,也就是没有解决跨域问题。
通过 F12 可以看到:
需要通过设置 Cookie 的 SameSite 属性,而这个属性需要配合 Secure 才会生效,也就是只有用 https 协议才会生效。而我的站点没有申请 SSL 证书,因此也就无法尝试了。