Vue脚手架配置代理

学习记录

假如本地浏览器域名为https://localhost:8080，请求的服务器资源域名为https://localhost:5000/data

使用axios

首先去终端安装axios，npm i axios

然后引入 import axios from "axios"

使用axios.get("https://localhost:5000/data").then(response=>{},error=>{})去获取数据是错误的

这里会出先一个跨域问题。

因此需要在浏览器与请求的服务端之间开启一个代理服务器，代理服务器的域名也和本地浏览器域名相同https://localhost:8080

然后去Vue.config.js文件里去配置devServe:{proxy:"https://localhost:5000"},

然后换为代理服务器的域名axios.get("https://localhost:8080/data").then(response=>{},error=>{})。

这种方法一缺点是不能配置多个代理服务器，且会优先请求到前端里的的资源（如果前端资源与后端服务器资源同名，请求回来的是前端里的资源）

方法二

是在Vue.config.js里配置devServe时写成devServe:{proxy{“api”:{target:"https://localhost:5000"}}},

这里的“api”是设置一个请求的前缀，就相当于如果走代理 不找前端资源里同名的资源，就设置了一个前缀api，axios.get("https://localhost:8080/api/data")。

注意还需配置一个pathRewrite:{"^/api":""}在proxy里,这里是重写路径，用正则匹配所有以api开头的路径换成空的，因为你不这样改的话，你开启的代理服务器会带着这个api路径去请求5000服务器，但是5000原本服务器是没有api这个路径的，所以要重写删除这个前缀。

总结方法二比方法一灵活就在于可以确定你需要请求的不是前端资源上的，而一定是服务器里的资源，设置api前缀就相当于将本地浏览器服务器与代理服务器链接绑定了，但从代理服务器到数据服务器的时候你又要把前缀给删除了。