前端(使用vercel)
区分生产环境和开发环境(2个方法)
方法1
const isDev = process.env.NODE_PATH === 'development'
const myAxios = axios.create({
baseURL: isDev ? 'http://localhost:8080/api' : '线上接口'
});
方法2(vite)
根目录新建两个文件
.env.production
.env.development
里面填写线上和开发地址
development填写
VITE_API_BASE_URL=https://开发地址(localhost)/
production填写
VITE_API_BASE_URL=https://线上地址.com/
在axios的全局配置中配置
const myAxios = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL ||'http://localhost:8080/api'
});
myAxios.defaults.withCredentials = true//开启发送请求带着cookie
vercel代理配置
前端到此配置完成跨域的方案。
后端(微信云托管)
打包之前需要配置线上地址(在controller业务里面加入跨域注解)
@CrossOrigin(origins = "https://线上地址", allowCredentials = "true")
另外,全局的跨域config也需要配置一下
/**
* 跨域配置
*
*/
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
//设置允许跨域的路径
registry.addMapping("/**")
//设置允许跨域请求的域名
//当**Credentials为true时,**Origin不能为星号,需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
.allowedOrigins("http://localhost:3000", "http://127.0.0.1:3000", "https://线上地址"
, "http://localhost:5173", "http://127.0.0.1:5173")
//是否允许证书 不再默认开启
.allowCredentials(true)
//设置允许的方法
.allowedMethods("*")
//跨域允许时间
.maxAge(3600);
}
}
还需要配置yml文件,更换mysql、redis等地址,这里在application-prod.yml中
# 线上配置文件
spring:
# DataSource Config
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: 'jdbc:mysql://xx.xx.xx.xx:3306/数据库table名?useSSL=false'
username: root
password: 1234
#redis 配置
redis:
port: 6379
host: xxx.xxx.xxx.xxx # Redis 服务器的 IP 地址
database: 0
redisson_database: 3
server:
address: 0.0.0.0
servlet:
session:
cookie:
secure: true # 仅在 HTTPS 下发送 Cookie
http-only: true # 防止 JavaScript 访问
same-site: none # 允许跨域请求
配置完成,pc端和安卓可以正常访问,但是ios不能正常访问
ios需要在浏览器设置中打开防跨域追踪。