Vite+typeScript搭建的vue3项目proxy代理解决跨域问题

跨域接口链接，以此链接为例：https://www.wanandroid.com/banner/json

我们查看vite官网跨域教程

配置 Vite {#configuring-vite} | Vite中文网

 1.在vite.config.ts添加server.proxy代理

 

server: {
        proxy: {
            '/api': {
                target: 'https://www.wanandroid.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            },
        }
    }

配置后/api就是代理了target配置的地址（ https://www.wanandroid.com）

可以理解为:/api等于https://www.wanandroid.com

所以不需要配置axios的baseUrl了，切记。

2.验证接口

  axios.get("/api/banner/json").then(res => {
    console.log("banner====>",res);
  });

此时，get请求路径不在是https://www.wanandroid.com/banner/json而是/api/banner/json

到此就可以跨域了。

验证：

 拿到数据啦。。。