Js设计模式之无类型设计模式(七)、代理模式
goJhou 发布于2018-03 浏览:2174 回复:4
1
收藏

如果直接访问谷歌,是访问不了的,因为跨域及墙的问题

那我们要访问谷歌,需要挂VPN到外网,通过VPN服务器将谷歌的数据作为中间人传给我们

客户端 -> VPN服务器 -> 国外服务器

这也是一个跨域的现实例子

最常用的就是ajax跨域

其次通常我们会使用node开服务去做跨域请求


学习代理模式的同时,也学一下如何用node去搭建服务器

1. node的安装不说了
2. 在项目目录打开cmd 随后npm i express
3. 书写app.js

//引入express
var express = require("express");

//初始化
var app = new express();

//get访问路径时,执行对应函数
app.get("/goJhou",function(req,res){
    //req代表浏览器发送给服务器所有参数。get携带的参数。
    //res代表服务器返回的内容

    res.send("Hello World");

});

app.listen(666);

4. 然后使用node跑起这个app cmd中输入 node app
5. 浏览器访问localhost:666/goJhou 随后浏览器显示Hello World

这时候,一个服务器就做完了,开放了一个接口

我们尝试去用ajax获取他




    
    代理模式
    




 

运行发现,控制台提示跨域了,跨端口也会有这种情况。

这时候就会要用到代理模式

ps: 只有后台可以解决跨域问题,前端是无法解决的。哪怕你所谓的ajax的jsonp模式,也需要后台接口支持


jsonp的处理机制这里就不多说了,可以自行百度一下

将app.js修改一下,然后重新监听

//引入express
var express = require("express");

//初始化
var app = new express();

//get访问路径时,执行对应函数
app.get("/goJhou",function(req,res){
    //req代表浏览器发送给服务器所有参数。get携带的参数。
    //res代表服务器返回的内容

    // res.send("Hello World");

    //查看get各参数
    console.log(req.query);

    var callback=req.query.callback;
    var data = {name: "goJhou",age: 22};


    //原生版本
    res.send( callback + "(" + JSON.stringify(data)+")" );

    //直接jsonp版本 只能二选一
    // res.jsonp(data);
});

app.listen(666);

 


就可以成功跨端口代理访问啦

再深入下去就可以研究反向代理啦 例如nginx,axios等,可自定义host,header等进行请求,已骗过验证服务器来跨域获取一些对请求客户端有所要求的接口

收藏
点赞
1
个赞
共4条回复 最后由用户已被禁言回复于2022-04
#5goJhou回复于2018-10
#4 zt_926回复
是的,我没有看到书写app.js这块,我的锅,因为平日里用c#做后台api接口,用的比较多的是cors,进行跨域,第一次次写node后台跨域的时候都快疯了,百度了老久
展开

没事,发现错误是好事~

0
#4zt_926回复于2018-10
#3 goJhou回复
嗯对的  这个例子 代理是部署在node服务器上的 属于后台服务  前端是看不见app.js的源码的 可以尝试一下
展开

是的,我没有看到书写app.js这块,我的锅,因为平日里用c#做后台api接口,用的比较多的是cors,进行跨域,第一次次写node后台跨域的时候都快疯了,百度了老久

0
#3goJhou回复于2018-08
#2 zt_926回复
wait ,大神,这些最终要的配置你全部隐藏了呀,跨域的核心代码全部都消失了呀
展开

嗯对的  这个例子 代理是部署在node服务器上的

属于后台服务 

前端是看不见app.js的源码的

可以尝试一下

0
#2zt_926回复于2018-08

wait ,大神,这些最终要的配置你全部隐藏了呀,跨域的核心代码全部都消失了呀

0
TOP
切换版块