如何利用koa-server-http-proxy实现服务端代理

最新推荐文章于 2024-06-24 09:43:38 发布

虱子也疯狂

最新推荐文章于 2024-06-24 09:43:38 发布

阅读量316

点赞数 4

分类专栏：程序员文章标签： http 网络协议网络

本文链接：https://blog.csdn.net/2301_76379462/article/details/138608331

版权

程序员专栏收录该内容

277 篇文章 0 订阅

订阅专栏

const Koa = require(“koa”);

const static = require(“koa-static”);

const Router = require(“koa-router”);

let app = new Koa();

let router = new Router();

app.use(static(__dirname+“/static”));

router.get(“/”,ctx=>{

ctx.body = "5000端口"

});

router.post(“/Serverpost”,ctx=>{

ctx.body = "5000端口--同源"

})

app.use(router.routes());

app.listen(5000)

const Koa = require(“koa”);

const static = require(“koa-static”);

const Router = require(“koa-router”);

let app = new Koa();

let router = new Router();

app.use(static(__dirname + “/static”));

router.get(“/index”, ctx => {

ctx.body = "4000端口"

});

router.post(“/Serverpost”,ctx=>{

ctx.body = "小点声，我偷摸来的"

})

app.use(router.routes());

app.listen(4000)




准备好后，我们在服务器端做一个代理，只需要一个中间件就可以

const koaServerHttpProxy = require(“koa-server-http-proxy”);




然后写入服务端代理：作用其实就是接口转换



举个例子：`如果我现在去找我的同源服务器拿数据，浏览器没什么问题，但是如果我跨域去另一个服务器拿数据，浏览器就会因为同源策略给我报错，所以我们现在呢，就让我这个同源的服务器，去找和我非同源也就是跨域的服务器拿数据，然后我再去找我同源的服务器拿数据，这样浏览器就不会因为同源策略触发报错了。但是你需要给他们两个一个共同的暗号，也就是说我们需要配置一下`



配置的两个参数



1.  和你后端共同商量出来的暗号

2.  对象，里边有三个参数

    *   跨域去的路径

    *   以你和后端共同商量出来的暗号开头的，规定以什么开头的就会把他的路径替换成什么，我们这里把它替换为空就可以了，不需要替换成什么太复杂的东西

    *   开启数据



我们这里的配置写了 **“/api”** 这个时需要与后端共同协商出来的

app.use(koaServerHttpProxy(“/api”,{

target:"http://localhost:4000",

pathRewrite:{'^/api':''},

changeOrigin:true

}));




然后我们调整一下前端页面

	document.querySelector(".btn2").onclick = function(){

        let xhr = new XMLHttpRequest();

        xhr.open("post","/api/Serverpost",true);	// 调整的是这里

        xhr.onload = function(){

            console.log(xhr.responseText);

        };

        xhr.send()

    }




**终端反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200414172446598.jpg)  

**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200414171731333.jpg)  

这样我们就绕开了浏览器，通过后端代理实现了跨域获取数据  

于前端而言，第一个就是同源，第二个就是非同源也就是跨域，区别就是需要和后端人员聊一下，商量一个暗号，然后在你所有需要跨域的前边都加上这么一个暗号



 
#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/1fd99b17e38520c59c174b74b1b5feb8.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/7bf7fdd22ee94d63a278ed08af2a0641.png)

![](https://img-blog.csdnimg.cn/img_convert/478825090c0a7f9de6ed414e1877b80e.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
roid开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**