node服务器转发请求以及node拦截ajax请求

Cruise_Chan 发布于2019-08-22 16:03 / 3333人阅读

摘要：如何实现服务器转发请求第三方接口的数据，也是服务器解决跨域的问题通过转发接口的数据，代码实例如下跨域问题，当你无法操作后台是否可以跨域的时候服务器转发请求创建请求监听接受数据监听关闭发送请求启动服务之后，就可以通过来访问数据。

如何实现服务器转发请求第三方接口的数据，也是node服务器解决跨域的问题
通过localhost转发接口

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

的数据，代码实例如下：
html

// 跨域问题，当你无法操作后台是否可以跨域的时候
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")) { //服务器转发请求
     //创建请求
      var request =  https.request({
            hostname:"m.maizuo.com",
            port:"443",
            path:path.path,
            method:"GET"
        },(resp)=>{
            let results = "";
            //监听接受数据
            resp.on("data",(dataObj)=>{
                results += dataObj;
            })
         //监听关闭
            resp.on("end",()=>{
                response.write(results);
                response.end();
            })
        })
        // 发送请求
        request.end();
    }
})

启动服务之后，就可以通过：

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

来访问数据。

二，下面来探讨一下node服务器如何拦截ajax请求，注意，页面引入jquery引入第三方是不存在跨域的问题，只有通过ajax调用第三方接口请求数据的时候，才会存在跨域。

我们将html定义如下




    
    
    
    
    
    
    Document


    这是一个div 
    这是一个div  
    这是一个div  
    这是一个div  
    这是一个div  
    这是一个div  
    这是一个div  
    这是一个div  
    这是一个div  
    这是一个div  
    这是一个div

我们将css文件和js文件一致放到public文件夹下面
我们通过express提供的第三方插件static读取静态的资源文件

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

在页面上定义2个按钮

利用jquery请求按钮点击事件触发

$(".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文件里面进行拦截请求

server.get("/",(req,res)=>{
    fs.readFile("./html/node.html",(err,info)=>{
        if(!err) {
            res.write(info);
            res.end();
        }
    })
})
//服务器拦截get请求
server.get("/api/user/login",(req,res)=>{
    console.log(req.url);
    res.json({
        status:200,
        message:"登录成功",
        data:{"getData":"fdsafds","goods":"ffffd","dsf":"343"}
    })
})


//服务器拦截post请求
server.post("/api/user/login",(req,res)=>{
    console.log(req.url);
    res.json({
        status:200,
        message:"登录成功",
        data:{"postdata":"fdsafd","goods":"ffffd","dsf":"343"}
    })
})

点击get按钮，前端请求的数据如下：

点击post按钮，前端请求的数据如下：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94007.html

VueCli3.0中集成MockApi

摘要：缺点需要增加本地的代码量，以及需要配置实现拦截优点数据通过会更丰富。缺点修改内容沟通成本高，跟后端扯皮利用去模拟优点可控内容以及实现动态。三本地周边知识本地的思想就是利用完成。注意接口的和自己的接口不要冲突。 VueCli3.0中集成MockApi 一：使用场景哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？没办法啊，资本主义的XX嘴脸啊来吧，技术评审我俩把接口...

刘玉平 2019-08-26 13:59 评论0 收藏0
JS HTTP 请求终极解决方案 - fly.js

摘要：支持请求响应拦截器。定位与目标的定位是成为请求的终极解决方案。拦截器支持请求响应拦截器，可以通过它在请求发起之前和收到响应数据之后做一些预处理。 Fly.js 是一个功能强大的轻量级的javascript http请求库，同时支持浏览器和node环境，通过适配器，它可以运行在任何具有网络能力的javascript运行环境；同时fly.js有一些高级的玩法如全局ajax拦截、在web a...

OpenDigg 2019-08-22 11:16 评论0 收藏0
九种跨域方式实现原理（完整版）

摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心...

edgardeng 2019-08-23 14:57 评论0 收藏0
九种跨域方式实现原理（完整版）

摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心...

justCoding 2019-08-02 14:10 评论0 收藏0
浅谈前端mock

摘要：引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用方式来避免这个问题。可能会涉及到门技术，分别是服务端技术随机生成特定格式数据的技术请求转发请求拦截。引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用mock方式来避免这个问题。本人参考了大量文章，结合自己的经验，给出自己在mock上的一些理解。 1. 原理何为mock,我认为mock主要就是通...

elina 2019-08-23 15:24 评论0 收藏0