出于安全考虑,未设置前端白名单,前端开发时,需要配置代理。
在本地创建一个虚拟服务器,发送请求数据,同时接受请求的数据,
利用服务器与服务器间,交互,不会有跨域问题,也是完全只靠前端自己独立解决跨域的方式
应用 | 代理前 | 代理后 |
---|---|---|
前端 | http://localhost:5173/cms | 置空 |
后端 | http://localhost:7001/api | https://gov.cn:8080/gov-api/ |
在.env.development文件中补充配置
VITE_API_BASE_URL=http://localhost:7001/api // 原配置
VITE_API_BASE_URL= # 置空被代理的基地址以匹配代理
VITE_PROXY_BASE_URL=https://gov.cn:8080/gov-api/
VITE_PROXY_PATH=/api
在vite.config.js文件
import { defineConfig, loadEnv } from 'vite'export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd(), '')const {VITE_PROXY_BASE_URL,VITE_PROXY_PATH} = envreturn {server: {proxy: {[VITE_PROXY_PATH]: {target: `${VITE_PROXY_BASE_URL}${VITE_PROXY_PATH}`,rewrite: path => path.replace(new RegExp(`^${VITE_PROXY_PATH}`), ''),changeOrigin: true}}}}
})
axios工具
import axios from 'axios'
const { VITE_API_BASE_URL: baseURL } = import.meta.env
const api = axios.create({ baseURL })
export default api