//导入代理的配置
const proxyTable = require("./proxy-table");
//拿出配置代理的所有匹配的字段
const proxyContext = Object.keys(proxyTable); // ["/api/text","/api/demo"]
module.exports = () => {
//创建一个默认的配置对象
const defautOptions = {
changeOrigin: true,
secure: false
}
//为什么return的是一个async的方法是因为请求代理是通过服务器进行代理的在启动脚本中会使用koa框架来注册这个中间件
return async (ctx, next) => { //ctx和next都是koa框架中间件自带的参数
for (let context of proxyContext) { //循环我们拿到的keys数组
if (ctx.url.startsWith(context)) { //判断当前请求的url中是不是以拿到的keys数组中的某个值开头的
ctx.respond = false; //绕开koa框架的内置response处理
let options = proxyTable[context];
//如果拿取到的直接是IP地址就赋值给配置对象
if (typeof options === 'string') {
options = {
target: options
}
}
//使用Object.assign()方法合并两个对象
options = Object.assign({},defautOptions,options);
//将每一个代理都注册,这里必须return一个自执行函数否则代理不会设置成功
proxyMiddleware(context,options)(ctx.req,ctx.res, next);
}
}
await next();
}
}
在项目的更目录中创建一个服务启动的文件脚本名字自定义
//在脚本文件中导入我们需要的框架和代理配置文件
const Koa = require("koa"); //所用的框架
const proxy = require("./config/proxy-middleware"); //刚才创建的代理配置文件
//创建一个服务
const app = new Koa();
//将代理插件注册到服务上
app.use(proxy()); //因为我们导出的是一个方法所以需要使用调用的方式注册
//启动服务
app.listen(9000,() => {
console.log("server running at http://127.0.0.1:9000");
});
//对koa框架不是熟悉的可以使用express框架 如果使用express框架拿代理就不用使用前面那样复杂的写法了
const express = require("express");
const proxy = require("http-proxy-middleware");
const app = express();
app.use(express.static("dist/"));
app.use("/all", proxy({
target: "http://127.0.0.1:3000",
changeOrigin: true,
}))
app.listen(9000, (err) => {
if (err) return console.log(err);
console.log("app as running at http://127.0.0.1:9000");
})代理配置好以后就可以写请求方法了,在创建好的store文件夹下面的actions文件里编写请方法
//导入Vue
import Vue from "vue"
export default {
//测试接口
testInterface({},postdata) {
//postdata是你调用的时候传过来的参数可以更具需求拼接接口
//let ipstr = `/api/text?id=${postdata.id}`;
