解决跨域——后端代理

后端代理

• 跨域是浏览器规范，通过同服务器请求数据，不通过浏览器请求，也能解决浏览器限制； 转发请求
• 利⽤http模块实现简单的服务器转发
• 利⽤ koa-server-http-proxy中间件实现代理

前端页面

xhr.open(“post”,"/api/Serverpost",true);

后端服务器

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

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

• 使用
  服务器端代理 ： 接口转发
  app.use(koaServerHttpProxy("/api",{
  target:“http://localhost:4000”,
  pathRewrite: { ‘^/api’: ‘’ },
  changeOrigin: true
  }));

const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
const koaServerHttpProxy = require("koa-server-http-proxy");

let app = new Koa();
let router = new Router();
app.use(static(__dirname+"/static"));

//服务器端代理 ： 接口转发
app.use(koaServerHttpProxy("/api",{
    target:"http://localhost:4000",
    pathRewrite: { '^/api': '' },
    changeOrigin: true
}));


router.get("/",ctx=>{
    ctx.body = "5000端口"
})

router.post("/Serverpost",ctx=>{
    ctx.body= "5000端口--同源"
});
app.use(router.routes());
app.listen(5000);