共计 1355 个字符，预计需要花费 4 分钟才能阅读完成。
前言
本篇文章基于 vue、node(koa)
需要
vue 我的项目开发过程中，接口跨域是一个很常见的问题。在开发时候能够用 vue 自带的 proxy 能够轻松解决。生产环境下，前端我的项目往往是部署在后端我的项目下，不会存在跨域的问题，接口前缀能够疏忽。
dev 环境下，申请一个产品列表接口，咱们可能会这么做：
https://www.baidu.com/api/product/list
生产环境下，前缀能够疏忽：
/api/product/list
问题来了，如果咱们想在本地测试生产环境下的前端我的项目，会存在跨域的问题；发给后端部署我的项目又太麻烦，批改代价太大。咱们能够本人部署一个繁难的 node 服务，来部署本人的前端我的项目~
实现
0. 装置依赖
npm i koa --save-dev
npm i koa-static --save-dev
npm i koa-mount --save-dev
npm i http-proxy-middleware --save-dev
npm i koa2-connect --save-dev
1. koa 搭建繁难服务端
引入 koa，而后监听端口
const Koa = require('koa');
const Koa = require('koa');
const path = require('path');
const app = new Koa();;
const port = process.env.PORT || 3000;
app.listen(port, () => {console.log(` Your application is running here: http://localhost:${port}`);
});
凋谢 dist（即打包进去的目录）
const koaStatic = require('koa-static');
const koaMount = require('koa-mount');
// 凋谢目录
app.use(koaMount('/', koaStatic(resolve('../dist'))));
这样差不多就实现了，跑服务而后关上 3000 端口，我的项目可能失常拜访：
2. 转发接口申请
我的项目是能失常申请了，可是还须要解决接口问题，即 node 当成中间件，转发前端接口申请到真正的后端接口
const {createProxyMiddleware} = require('http-proxy-middleware');
const k2c = require('koa2-connect');
app.use(async (ctx, next) => {
const url = ctx.path;
if (url.startsWith('/api')) {
ctx.respond = false;
await k2c(
createProxyMiddleware({
target: # 后端的接口地址,
changeOrigin: true,
secure: false,
}),
)(ctx, next);
}
return await next();});
最初再关上浏览器查看，功败垂成, 接口转发胜利~
残缺代码
残缺代码
END
正文完
