前言本文基于vue，node(koa)需求在vue项目开发过程中，接口跨域是一个很常见的问题。开发时使用vue自带的proxy就可以轻松解决。在生产环境中，往往前端项目部署在后端项目下，不会出现跨域问题，接口前缀可以忽略。在dev环境，请求商品列表接口，我们可能会这样：https://www.baidu.com/api/product/list在生产环境，可以忽略前缀：/api/product/list问题来了，如果我们要在本地测试生产环境的前端项目，就会出现跨域问题；发到后端部署项目太麻烦，修改成本太高。我们可以自己部署一个简单的node服务来部署自己的前端项目~实现0.安装依赖npmikoa--save-devnpmikoa-static--save-devnpmikoa-mount--save-devnpmihttp-proxy-middleware--save-devnpmikoa2-connect--save-dev1.koa搭建一个简单的服务器导入koa，然后监听端口constkoa=require('koa');constkoa=require('koa');constpath=require('path');constapp=newKoa();;constport=process.env.PORT||3000；app.listen(port,()=>{console.log(`您的应用程序正在此处运行：http://localhost:${port}`);});打开dist（即打包后的目录）constkoaStatic=require('koa-static');constkoaMount=require('koa-mount');//打开目录app.use(koaMount('/',koaStatic(resolve('../dist'))));到此差不多就完成了，运行服务，开启3000端口，项目可以正常访问：2.转发接口请求项目可以正常请求，但是接口问题还是需要处理，即node作为一个中间件并将前端接口请求转发到真正的后端接口const{createProxyMiddleware}=require('http-proxy-middleware');constk2c=require('koa2-connect');app.use(async(ctx,next)=>{consturl=ctx.path;if(url.startsWith('/api')){ctx.respond=false;awaitk2c(createProxyMiddleware({target:#后端接口地址,changeOrigin:true,secure:false,}),)(ctx,next);}returnawaitnext();});最后打开浏览器查看，大功告成，界面转发成功~源码源码END
