vite配置代理proxy实现跨域问题
最近在开发vite+vue项目时，调用接口获取服务器数据时提示接口有跨域问题，解决办法是配置代理：
export default defineConfig({
//配置代理
server: {
proxy: {
'/api': {
target: 'https://api.baidu.com',
ws: true,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
});
创建request.ts文件,然后配置好axios调用接口：
import axios from 'axios';
// 配置新建一个 axios 实例
const service = axios.create({
baseURL: 'http://localhost:8888',
timeout: 50000,
headers: { 'Content-Type': 'application/json' },
});
创建一个接口文件xxx.ts，引入request.ts
import request from '/@/utils/request';
export function useApi() {
return {
ceshi:()=>{
return request({
url: '/api/adminMenu.json',
method: 'get',
})
}
};
}
在我们调用ceshi这个方法时，我们访问的接口为：http://localhost:8888/api/adminMenu.json，我们做了代理以后会捕捉到路由中的‘/api’如果存在则路由会变成：https://api.baidu.com/adminMenu.json，
这样我们就能访问到真实的接口：https://api.baidu.com/adminMenu.json 中的数据了
注意：代理地址如果是本地地址，尽量不要用https://localhost/adminMenu.json，可以用https://127.0.0.1/adminMenu.json代替
