proxy代理解决 vite-vue3 和 vuecli vue2 跨域的问题

关于跨域，相信很多小伙伴都遇到过，这篇文章主要讲:如标题 vite 创建的 vue3 和 vuecli 创建的vue2 跨域的用法，以及他们语法上细微的区别：

注：接口暂时可以用

经典跨域：

此时数据已经请求成功，但是同源策略限制，浏览器拒绝向我们展示资源

废话少说 以下解决问题 

因为两个项目都是用axios演示所以最先下载axios ：

npm install axios

首先讲vuecli- vue2 跨域的用法 ：第一步示例如下 

 

 以上代码写在 main.js 入口文件中，此时配置好了axios默认请求地址(本地地址加项目运行端口)

注意：全局配置后 $http 就代表 axios 

在组件内请求的时候一定要在组件创建完成 也就是 最早在created内请求 

第二步 在vue.config.js 配置文件中设置：

 重新请求 

 this指向vue实例 ，而created生命周期之前 vue实例还未创建 所以不能用this setup 函数中同理

跨域成功：

 那么vue2 cli 说完 就该vite vue3 了

vuecli创建项目配置文件的是 vue.config.js  而 vite 创建的是 vite.config.js

第一步 打开main.js 写入以下axios配置

 此时可以看出与cli-vue2 项目配置的不同之处

vue2 在挂载全局axios的时候 用的是 Vue.prototype直接挂载到vue原型对像上

而vue3就是给你一个配置api ：app.config.globalProperties  注意两者的差别

第二步在 vite.config.js 中配置  

 以上就是最简单的 proxy 跨域代理 (因为能删的都删了) 

直接调用

 以上完 end