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

最新推荐文章于 2024-07-09 16:06:10 发布

X可乐

最新推荐文章于 2024-07-09 16:06:10 发布

阅读量3k

点赞数

文章标签： ajax node.js 前端

本文链接：https://blog.csdn.net/CS_DGD/article/details/105515211

版权

为什么需要服务端代理

要问为什么，先要知道它是什么
后端代理——又被称为正向代理，其实它就是一种跨域方式。

跨域其实是浏览器的行为，和服务器没什么关系，和ajax更没关系，而ajax作为一个承上启下的中
间商，他的任务已经很多了，但是服务端却很闲，所有我们让服务端代为处理一下跨域

准备两个服务端和一个前端页面做一下对比

前端页面

<body>
    <h1>5000 端口</h1>
    <button class="btn1">请求非跨域/同源</button>
    <button class="btn2">请求跨域/非同源</button>

    <script>
        document.querySelector(".btn1").onclick = function(){
            let xhr = new XMLHttpRequest();
            xhr.open("post","/Serverpost",true);
            xhr.onload = function(){
                console.log(xhr.responseText);
            };
            xhr.send();
        }

        document.querySelector(".btn2").onclick = function(){
            let xhr = new XMLHttpRequest();
            xhr.open("post","/Serverpost",true);
            xhr.onload = function(){
                console.log(xhr.responseText);
            };
            xhr.send()
        }
    </script>
</body>

服务器端页面

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");

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

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

配置的两个参数

和你后端共同商量出来的暗号
对象，里边有三个参数
- 跨域去的路径
- 以你和后端共同商量出来的暗号开头的，规定以什么开头的就会把他的路径替换成什么，我们这里把它替换为空就可以了，不需要替换成什么太复杂的东西
- 开启数据

我们这里的配置写了 “/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()
        }