server后端代理解决ajax跨域

最新推荐文章于 2024-09-14 18:52:56 发布

Jason–json

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量126

点赞数

分类专栏： ajax 文章标签： javascript node.js es6 ajax 后端代理

本文链接：https://blog.csdn.net/weixin_46146313/article/details/105582452

版权

ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>端口号5000</h2>
    <button class="but">同源请求</button>
    <button class="but">server跨域请求</button>
<script>
    let but = document.querySelectorAll(".but");
    // 同源
    but[0].onclick = function(){
        
        let xhr = new XMLHttpRequest();
        xhr.open("post","/Serverpost",true) //路径这里相对路径
        xhr.onload = function(){
           console.log(xhr.responseText) 
        }
        xhr.send()
    }
    // 跨域非同源 5000的服务去server copy文件的4000服务中请求
    but[1].onclick = function(){
        let xhr = new XMLHttpRequest();
        xhr.open("post","/api/Serverpost",true) //路径这里相对路径
        xhr.onload = function(){
           console.log(xhr.responseText) 
        }
        xhr.send()
    }
</script>

5000服务
const Koa = require("koa");
const Router = require("koa-router");
const static = require("koa-static");
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':''}, //^/api 以api开头的替换后面的 这里是空
    changeOrigin: true
}));
router.get("/",ctx=>{
    ctx.body = "5000端口"
})
router.post("/Serverpost",ctx=>{
    ctx.body = "同源5000端口"
})

app.use(router.routes());
app.listen(5000); 


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

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

router.post("/Serverpost",ctx=>{
    ctx.body = "我是被5000服务请求到的数据"
})

app.use(router.routes());
app.listen(4000);