一、跨域问题
假设vue项目的运行地址为:http://localhost:5173,·此时我们想要调用后端服务的rest api,而后端接口暴露的地址为:https://192.168.1.1:8080/user。
可以发现前端服务与后端服务的域名是不同的,默认情况下,即使运行前后端服务的两台主机在同一网段内,前端应用是无法从后端服务成功请求到数据的。
对于这种跨域问题,有两种解决方法,一是让后端服务主动开启CORS跨域资源共享;二是在前端配置一下proxy代理。既然前后端主机在同一网段内,那本身是可以相互ping通的,配置proxy代理相当于代理服务器代替前端向后端应用发送请求,然后把请求到的数据转交给前端应用。
关于跨域问题,感觉还涉及到很多协议问题等等知识,有时间再研究吧。
二、Vue3配置proxy代理
找到Vue3项目中的vite.config.ts/vite.config.js文件,新增如下内容
// 配置跨域请求的代理服务器
server: {
proxy: {
"/api": {
target: "http://192.168.1.1:8080",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
配置好后,比如我们想要请求http://192.168.1.1:8080/user/getNum这个api的资源,那按照如下格式写代码就可以了:
const reponse = await axios.get("/api/user/getNum");
根据vite.config.ts/vite.config.js中的配置,代理会自动帮我们把请求url中的/api替换成http://192.168.1.1:8080,最终代理会把成功请求到的数据返回给Vue前端。