前言

本篇文章基于 vue、node(koa)

 需要

vue 我的项目开发过程中，接口跨域是一个很常见的问题。在开发时候能够用 vue 自带的 proxy 能够轻松解决。生产环境下，前端我的项目往往是部署在后端我的项目下，不会存在跨域的问题，接口前缀能够疏忽。

dev 环境下，申请一个产品列表接口，咱们可能会这么做：

https://www.baidu.com/api/product/list

生产环境下，前缀能够疏忽：

/api/product/list

问题来了，如果咱们想在本地测试生产环境下的前端我的项目，会存在跨域的问题；发给后端部署我的项目又太麻烦，批改代价太大。咱们能够本人部署一个繁难的 node 服务，来部署本人的前端我的项目~

 实现

 0. 装置依赖

npm i koa --save-devnpm i koa-static --save-devnpm i koa-mount --save-devnpm i http-proxy-middleware --save-devnpm 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