由于测试环境远程接口,是采用https协议,为了能正常携带cookie访问接口,需要把本地项目也采用https协议访问。前提是后端的cookie设置在二级域名下,且允许固定其他子域名跨域访问(需要在后端设置)
项目框架:vue3,node:v22.13.0
1、首先在 hosts 文件中做好域名映射:
例如:测试环境域名:oms.test.com,那么本地域名映射可以设置为 127.0.0.1 localoms.test.com
2、 设置好本地域名映射后,生成对应的https证书:
2.1、 安装mkcert:
bash
brew install mkcert
2.2、初始化:
bash
mkcert -install
2.3、生成 localoms.test.com 证书:
bash
mkcert localoms.test.com
在当前目录下将产生两个文件:
- 证书文件:./localoms.test.com.pem
- 私钥文件:./localoms.test.com-key.pem
2.4、可以将证书和私钥文件,拷贝到项目根目录 certs目录下
3、项目vite.config.js 设置
javascript
server: {
host: 'localoms.test.com', // 本地使用 域名 访问,需要做 hosts 域名映射
port: 3001, // 使用的端口,默认是 3001
open: true, // 启动时自动打开浏览器
cors: true, // 启用跨域支持(可选)
allowedHosts: ['localoms.test.com'],
https: { // 设置https证书,本地开发使用https访问
key: fs.readFileSync('./certs/localoms.test.com-key.pem'),
cert: fs.readFileSync('./certs/localoms.test.com.pem'),
},
proxy: {
'/': {
target: 'https://oms.test.com',
changeOrigin: true,
}
}
},