关于前端:使用node转发请求

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

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

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


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

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


/api/product/list

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


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

引入 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 端口，我的项目可能失常拜访：

我的项目是能失常申请了，可是还须要解决接口问题，即 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

关于前端:使用node转发请求

前言

需要

实现

0. 装置依赖

1. koa 搭建繁难服务端

2. 转发接口申请

残缺代码