node服務(wù)器轉(zhuǎn)發(fā)請(qǐng)求以及node攔截ajax請(qǐng)求

Cruise_Chan 發(fā)布于2019-08-22 16:03 / 3335人閱讀

摘要：如何實(shí)現(xiàn)服務(wù)器轉(zhuǎn)發(fā)請(qǐng)求第三方接口的數(shù)據(jù)，也是服務(wù)器解決跨域的問題通過轉(zhuǎn)發(fā)接口的數(shù)據(jù)，代碼實(shí)例如下跨域問題，當(dāng)你無法操作后臺(tái)是否可以跨域的時(shí)候服務(wù)器轉(zhuǎn)發(fā)請(qǐng)求創(chuàng)建請(qǐng)求監(jiān)聽接受數(shù)據(jù)監(jiān)聽關(guān)閉發(fā)送請(qǐng)求啟動(dòng)服務(wù)之后，就可以通過來訪問數(shù)據(jù)。

如何實(shí)現(xiàn)服務(wù)器轉(zhuǎn)發(fā)請(qǐng)求第三方接口的數(shù)據(jù)，也是node服務(wù)器解決跨域的問題
通過localhost轉(zhuǎn)發(fā)接口

https://m.maizuo.com/v4/api/film/now-playing?__t=1523003169298&page=1&count=5

的數(shù)據(jù)，代碼實(shí)例如下：
html

// 跨域問題，當(dāng)你無法操作后臺(tái)是否可以跨域的時(shí)候
var http = require("http");
var https = require("https");
var server = http.createServer();
var fs = require("fs");
server.listen("8080");
var url = require("url");

server.on("request",(request,response)=>{
    var path = url.parse(request.url);
    if(path.pathname == "/") {
        fs.readFile("./html/coress.html",(err,info)=>{
            response.write(info);
            response.end();
        })
    } else if(path.pathname.startsWith("/v4")) { //服務(wù)器轉(zhuǎn)發(fā)請(qǐng)求
     //創(chuàng)建請(qǐng)求
      var request =  https.request({
            hostname:"m.maizuo.com",
            port:"443",
            path:path.path,
            method:"GET"
        },(resp)=>{
            let results = "";
            //監(jiān)聽接受數(shù)據(jù)
            resp.on("data",(dataObj)=>{
                results += dataObj;
            })
         //監(jiān)聽關(guān)閉
            resp.on("end",()=>{
                response.write(results);
                response.end();
            })
        })
        // 發(fā)送請(qǐng)求
        request.end();
    }
})

啟動(dòng)服務(wù)之后，就可以通過：

http://localhost:8080/v4/api/film/now-playing?__t=1523003169298&page=1&count=5

來訪問數(shù)據(jù)。

二，下面來探討一下node服務(wù)器如何攔截ajax請(qǐng)求，注意，頁面引入jquery引入第三方是不存在跨域的問題，只有通過ajax調(diào)用第三方接口請(qǐng)求數(shù)據(jù)的時(shí)候，才會(huì)存在跨域。

我們將html定義如下




    
    
    
    
    
    
    Document


    這是一個(gè)div 
    這是一個(gè)div  
    這是一個(gè)div  
    這是一個(gè)div  
    這是一個(gè)div  
    這是一個(gè)div  
    這是一個(gè)div  
    這是一個(gè)div  
    這是一個(gè)div  
    這是一個(gè)div  
    這是一個(gè)div

我們將css文件和js文件一致放到public文件夾下面
我們通過express提供的第三方插件static讀取靜態(tài)的資源文件

server.use("/static",express.static(__dirname+"/public"));

在頁面上定義2個(gè)按鈕

利用jquery請(qǐng)求按鈕點(diǎn)擊事件觸發(fā)

$(".btn1").on("click",function() {
    $.ajax({
        url:"/api/user/login?name=zs&password=lisi",
        method:"GET",
        success:function(data) {
           console.log("成功");
           console.log(data);
        },
        error:function() {
            console.log("失敗");
        }
    })
})

$(".btn2").on("click",function() {
    $.ajax({
        url:"/api/user/login",
        method:"POST",
        data:{
            name:"sz",
            password:"r4tr4"
        },
        success:function(data) {
           console.log("成功");
           console.log(data);
        },
        error:function() {
            console.log("失敗");
        }
    })
})

在node主入口js文件里面進(jìn)行攔截請(qǐng)求

server.get("/",(req,res)=>{
    fs.readFile("./html/node.html",(err,info)=>{
        if(!err) {
            res.write(info);
            res.end();
        }
    })
})
//服務(wù)器攔截get請(qǐng)求
server.get("/api/user/login",(req,res)=>{
    console.log(req.url);
    res.json({
        status:200,
        message:"登錄成功",
        data:{"getData":"fdsafds","goods":"ffffd","dsf":"343"}
    })
})


//服務(wù)器攔截post請(qǐng)求
server.post("/api/user/login",(req,res)=>{
    console.log(req.url);
    res.json({
        status:200,
        message:"登錄成功",
        data:{"postdata":"fdsafd","goods":"ffffd","dsf":"343"}
    })
})

點(diǎn)擊get按鈕，前端請(qǐng)求的數(shù)據(jù)如下：

點(diǎn)擊post按鈕，前端請(qǐng)求的數(shù)據(jù)如下：