>

【乐百家前段】后面一个常见跨域施工方案(全

- 编辑:乐百家599手机首页 -

【乐百家前段】后面一个常见跨域施工方案(全

☞ 消除代理境遇的主题材料

上面大家提到了多个难题,日常开荒蒙受最发烧的贰个是 combo ,曾经大家页面上的代码加一个?_xxx  参数就可以见到直接最初调节和测量检验格局,那是因为程序的输入独有贰个,何况富有脚本的重视也卷入到三个名称叫deps.js  文件中,加上调节和测验参数之后,能够将原先 combo 加载的公文:  ,遵照非 combo 的点子加载:

1
2
3
http://example.com/path/a.js
http://example.com/path/b.js
http://example.com/path/c.js

地点的代码能够轻易地代理到地点,不过部分系统生成的代码并从未 deps.js  文件,它是将脚本直接出口到页面上:

<script src=";

1
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>

☞ 解决 combo 问题

那时候经过 Fiddler/查理工科具比较难满意须要,对于那个难点有多少个管理方案:

1). 浏览器须要全体代理到地方的叁个劳动

首先写多少个地面服务:

JavaScript

var http = require('http'); // npm i http-proxy --save var httpProxy = require('http-proxy'); var proxy = httpProxy.createProxyServer({}); var server = http.createServer(function(req, res) { console.log(req.url); if(req.url.indexOf("??") > -1){ // combo财富让 3400 端口的劳务管理proxy.web(req, res, { target: '' }); } else { // 直接回到 proxy.web(req, res, { target: req.url }); } }).listen(3399, function(){ console.log("在端口 3399 监听浏览器央求"); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var http = require('http');
// npm i http-proxy --save
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({});
 
var server = http.createServer(function(req, res) {
  console.log(req.url);
  if(req.url.indexOf("??") > -1){
    // combo资源让 3400 端口的服务处理
    proxy.web(req, res, { target: 'http://127.0.0.1:3400' });
  } else {
    // 直接返回
    proxy.web(req, res, { target: req.url });
  }
}).listen(3399, function(){
    console.log("在端口 3399 监听浏览器请求");
});

代码的意思是,利用 http-proxy 那一个 npm 包,代理浏览器的央浼,浏览器上使用 switchSharp 设置本地代理为  ,当呼吁过来,先剖断url,如若 url 中包蕴了 ?? 则将其当做 combo 能源管理,代理给地点的另三个服务  ,那几个服务选取央浼后会将 combo 内容分解成三个,全体乞请完以往再吐出来。

2). 使用本地服务央求 html 代码,替换 html 代码内容

行使强制手腕(源码替换)将代码解 combo,比方源码页面为:

<!-- html code --> <script src="; <!-- html code -->

1
2
3
<!-- html code -->
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>
<!-- html code -->

应用本地服务央浼那几个url,然后转变来:

<!-- html code --> <script src="; <script src="; <script src="; <!-- html code -->

1
2
3
4
5
<!-- html code -->
<script src="http://example.com/path/a.js"></script>
<script src="http://example.com/path/b.js"></script>
<script src="http://example.com/path/c.js"></script>
<!-- html code -->

得以达成这几个操作的代码:

JavaScript

var http = require('http'); // npm i request --save; var request = require('request'); http.createServer(function(req, res){ var path = req.url.slice(req.url.indexOf("path=") 5); console.log(path); if(!path) { res.write("path is empty"); res.end(); return; } request(path, function (error, response, body) { if (!error && response.statusCode == 200) { console.log(body); // 代码替换 body = body.replace('<script src=";', '<script src=" <script src=" <script src=";' ); res.write(body); res.end(); } }); }).listen(3399, function(){ console.log("listening on port 3399"); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var http = require('http');
// npm i request --save;
var request = require('request');
http.createServer(function(req, res){
    var path = req.url.slice(req.url.indexOf("path=") 5);
    console.log(path);
    if(!path) {
        res.write("path is empty");
        res.end();
        return;
    }
    request(path, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body);
            // 代码替换
            body = body.replace('<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>',
                '<script src="http://example.com/path/a.js"></script>
                <script src="http://example.com/path/b.js"></script>
                <script src="http://example.com/path/c.js"></script>'
            );
            res.write(body);
            res.end();
        }
    });
}).listen(3399, function(){
    console.log("listening on port 3399");
});

举例恳求  ,就能够得到Tmall首页的源码,然后对拿到的代码做替换。

☞ 解决代码压缩难点

对于那个标题,建议在线上放两份源码,大器晚成份是压缩源码,大器晚成份是未压缩源码,当页面 url 存在 debug 参数的时候,重返未压缩版本,平常重临压缩版本。当然,也足以应用上述办法管理难点。

只是,更客观的诀要应该是 sourceMap,前端未有地下,压缩代码只是扩大了 黑客 的抨击花费,并不要紧碍有本事的 红客借系统漏洞侵犯。所以可以为源码提供生机勃勃份 sourceMap 文件。

JavaScript

var gulp = require('gulp'); var sourcemaps = require('gulp-sourcemaps'); gulp.task('javascript', function() { gulp.src('src/**/*.js') .pipe(sourcemaps.init()) //.pipe(xx()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist')); });

1
2
3
4
5
6
7
8
9
10
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
 
gulp.task('javascript', function() {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      //.pipe(xx())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

关于 sourceMap 的 gulp 插件配置,详细的情况能够戳这里。不唯有是 JavaScript,CSS 也可以有 source maps,那一个音信方可在 Chrome 调整台的设置选项中观望:

乐百家前段 1

☞ 代码的拉取

万大器晚成二个类型唯有你精通什么校正,那那些项目标本领陈设就有一点不佳了,为了让大家都能管理你项目中的难点,必定要索要一个简洁的格局为开采者火速搭建测验情状,文档是一方面,即便有个生龙活虎键操作的命令,那就更棒了!

# 运转脚本 start: createFile getMod getPage # 创立目录 createFile: @[ -d module ] || mkdir module @[ -d page ] || mkdir page # 拉取模块仓库,这里有几十二个,相比费时,请耐心等待... getMod: cd module; for i in $(MODS); do [ -d $(MODPATH)$$i ] || git clone $(MODPATH)$$i; git co -b master; git co -b $(MODSV); done # 拉取页面货仓,tbindex getPage: cd page; @[ -d tbindex ] || git clone $(PAGEPATH)$PAGE;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 启动脚本
start: createFile getMod getPage
 
# 创建目录
createFile:
  @[ -d module ] || mkdir module
  @[ -d page ] || mkdir page
 
# 拉取模块仓库,这里有几十个,比较费时,请耐心等待...
getMod:
  cd module;
  for i in $(MODS); do
    [ -d $(MODPATH)$$i ] || git clone $(MODPATH)$$i;
    git co -b master;
    git co -b $(MODSV);
  done
 
# 拉取页面仓库,tbindex
getPage:
  cd page;
  @[ -d tbindex ] || git clone $(PAGEPATH)$PAGE;

 

上边是一个 MakeFile 的某些代码,功能是成立开采目录,拉取分支音讯,然后起始服务器,张开浏览器,使用 IDE 张开目录,万事就绪,只等主人敲代码。

全体育工作艺流程就黄金年代八分钟,完结开垦从前全部的预备工作。那一个剧本不止是给本身行使,假使其余人也急需参与开垦,二个下令就能够让参预者踏入开辟方式,加上文档表明,省却了超级多挂钩花费。

http模块

var http = require("http"); //加载模块

var server = http.createServer((request, response) => {

//成立三个web服务器

//request

//response

//设置响应头

console.log(request.url);

switch(request.url) {

             case "/":

                    response.write("首页");

                     break;

case "/list":

response.write("列表页");

break;

case "/detail":

response.write("详情页");

break;

}

response.writeHead(200, {

"Content-Type":"text/html; charset=utf8"

})

response.end();

//if(request.url)

})

//http80端口号 ftp23端口号

server.listen(3000, function() {

console.log("server has started at port 3000");

})

  • console.log(path.normalize(“./../a///b/c/.././d//“));

1、 前端设置:

☞ 代理调节和测量试验的相当的慢

而对于相比复杂的线上蒙受,代理也会赶上不菲绊脚石,比方:

线上财富 combo

并发谬误的剧本地址为  ,它对应着 a.js,b.js,c.js 多少个本子文件,要是大家使用 Fiddler/查尔斯那样的经文代理工科具调节和测验代码,就务须给那个工具编写插件,大概在轮换配置内部加一批推断恐怕正则,成本高,门槛高。

线上代码压缩

装进压缩,那是上线以前的必经流程。由于我们在卷入的环节中并从未考虑为代码添加sourceMap,而线上事先对应 index-min.jsindex.js 也因为安全方面包车型地铁原由给干掉了,那给大家调试代码产生了华而不实的不便利。

代码重视相当多,拉替代码难题

洋洋时候,大家的页面信任了多少个 asserts 能源,而那个财富各自布满在多个宾馆里面,甚至传布在差别的宣布平台上,为了能够在源码上清晰的调节和测量检验代码,大家不能不将装有的财富下载到本地,时期要是存在下载代码的权限难点,整个调节和测量试验进度就慢下来,这是足够不能够经得住的事情。比方某系统营造的页面,页面上的模块都以以商旅为维度区分的,贰个页面也许对应了5-50个旅舍,下载代码实为劳动。

最吓人的调节和测验是,本地未有对景挂画的测验情况、代理工科具又不满意大家的要求,然后就只好, 编辑代码->打包压缩->提交代码->查看效果->编辑代码->... ,借使您的类型支出是这种形式,请停下来,思虑调节和测验优化方案,正所谓必先利其器。

3.express 基于 Node.js 平台,火速、开放、极简的 web 开拓框架。

nmp install express -g

npm install express-generator -g(急速成立express的完好目录)

express -h

express myapp

cd myapp

npm start

express

1.新建文件夹

cd到该文件目录下

npm init (enter name:myapp enter....)

npm install express

在myapp里面新建app.js

在app.js里面写代码

var express  = require("express"),//加载express模块

http = require("http"), //加载http模块

app  = express(), //创立三个express实例

server  = http.createServer(app); //app能够看作http创制服务器的回调函数

//静态财富挂载,设置静态财富目录

//中间件 express.static

//挂载中间件 使用use

app.use(express.static("public"));

//定义一个获取访谈客商IP的中间件

//哪个先挂载,先接收哪个的代码

var ips = [];

function getIp(req, res, next) {

console.log(req.ip);

ips.push(req.ip);

next();

}

function responseIP (req, res, next) {

res.send(req.ip);

}

app.use((req, res, next) => {

console.log("hello");

next();

})

app.use(getIp);

app.use(responseIP);

app.get("/", (req, res) => {

res.send("首页");

})

app.get("/list", (req, res) => {

// console.log(req.ip);获取ip

res.send("列表页");

})

app.get("/details", (req, res) => {

res.send("详情页");

})

server.listen(3000, function() {

//监听端口号3000,并提示服务成功打开

console.log("Server has started");

})

总计express:中间件和路由.

对诉求举办拍卖

var xhr = new XMLHttpRequest();

 

// 前端按钮:浏览器是还是不是读写cookie

xhr.withCredentials = true;

 

// 访谈http-proxy-middleware代理服务器

xhr.open('get', '', true);

xhr.send();

在线调节和测验方案的观念与推行

2015/08/28 · HTML5 · 调试

原稿出处: 李靖(@Barret李靖)   

本文的要点不在移动端调节和测验上,移动端调节和测量检验无非就是调养页面和调度工具之间存在分离,清除这种分离并创造连结就会消除移动端的调节和测量试验难点。注重演讲的是所见即所得的调节和测量检验形式下会遭受的阻挠。

当大家展开网页,开掘一个模块未有科学地渲染可能空白时,假使调整台有报错,会直接根据报错定位到源码地方上马 debug;假诺调节台没有报错,则会基于模块名大概模块特征的贰个值,通过全局找搜索到这些模块的职责,然后在调度工具中断点,单步调节和测量检验,找到难题所在,当时大家只怕会那样做:

情形一:

小A同学展开调控台,开掘断点调节和测量检验不佳写代码,于是将减少的源码复制大器晚成份保存到本地,格式化,然后将线上财富通过代办工具代理到地点文件。

情形二:

小B同学早早的为团结配了大器晚成份本地开垦条件,于是她相见标题现在,直接去源码中一定错误地点,由于接纳的是预管理语言,所以要求先打包编译之后再在当地预览效果。

情形三:

小C同学的调度方式是小A和小B的汇总版本,将线上的能源代理到地头 build 目录文件,在 src 目录下校订未来编写翻译打包到 build,然后预览。

cmd命令:

   ./  当前目录

   ../ 上一级

   dir  查看当前目录

   ls  查看当前目录下文件

   windows 切换盘符 d:

   cls清屏

   cd 文件加名

  • emit

 

☞ 小结

优化流程、优化框架结构是大家大力坚持不渝的趋向,本文首要解说,编辑代码到调节和测量试验线上效益的经过,提议了清除combo 和代码压缩等主题素材的方案和提出。希望得以给不专长代理调节和测验的同室一点启示。

1 赞 收藏 评论

乐百家前段 2

2.爬虫 cheerio

规律: 1.拉取页面(字符串)http.get/request(node),file_get_content(php)

2.选用模块,方便快捷筛选.cheerio(node), simple.html.dom.php(php)

3.搜聚音信

npm install cheerio //安装cheerio模块

npm init

// spider.js

var http    = require("http");

var cheerio = require("cheerio");

var fs      = require("fs");

例子

2、 服务端设置:

☞ 开启懒人调节和测验形式

当见到线上边世难题(恐怕是其余同学肩负页面包车型大巴标题),脑中浮出那样的场景:

复制代码 笔者:"嘿,线上有难点啊!小编要调治代码!" Computer:"好的,主人。请问是哪些页面?"(弹出浮层) 我:浮层中输入U宝马7系L。 计算机:"请问是哪个地方出标题了?" 作者:(指着Computer)"模块A和模块B。" Computer:正在下载A、B能源...正在将上线A、B映射到地头...自动展开A、B对应文件夹 小编:编辑代码,然后实时预览效果。

1
2
3
4
5
6
7
8
复制代码
  我:"嘿,线上有问题啦!我要调试代码!"
电脑:"好的,主人。请问是哪个页面?"(弹出浮层)
  我:浮层中输入URL。
电脑:"请问是哪个地方出问题了?"
  我:(指着电脑)"模块A和模块B。"
电脑:正在下载A、B资源...正在将上线A、B映射到本地...自动打开A、B对应文件夹
  我:编辑代码,然后实时预览效果。

在那大家须要消逝那样多少个难点

  • 将页面前蒙受应的享有货仓/能源罗列在客户面前
  • 下载能源的权柄提醒和权杖管理
  • 线上能源解 combo,然后映射到本地

自然调节和测量检验之后,能够还应该有一个操作:

小编:"哈,已经修复了,帮作者付出代码~" 计算机:正在diff代码...收到确认提交非连续信号,提交到预发情形...收到已经预览非确定性信号...正在发布代码...收到线上回归数字信号...流程甘休

1
2
我:"哈,已经修复了,帮我提交代码~"
电脑:正在diff代码...收到确认提交信号,提交到预发环境...收到已经预览信号...正在发布代码...收到线上回归信号...流程结束

除开 debug 代码,大家须求做的就只是用肉眼看效能是不是ok,整个流程优化下来,体验是相当赞的!

NodeJS:

1.node.js支出条件搭建

2.npm nodejs包管理器

3.CommonJS模块化标准化,英特尔(require)

4.导出模块/加载模块

join 将多个参数值字符串结合成一个路径字符串

2.)proxy.html:(.

☞ 在线调节和测验执行(八个种类的调度工具)

输入须要调养的页面U中华VL(如 http://www.taobao.com):

乐百家前段 3

插件会剖判 DOM,遍历获得页面全数被引述到的仓库:

乐百家前段 4

筛选要求调治将养的模块(颗粒度细分到了html/js/css),点击调节和测验按键,能够见到调节和测量试验页面包车型客车财富都会引用本地下载的文件。

querystring模块 查询字符串

var qs = require("querystring");

var o = {

color: "red",

border: "1px solid red",

"font-size": "16px"

}

var ret = qs.stringify(o, ";", ":");

console.log(ret);

// "color:red;border: 1px solid red;font-size: 16px"

发射事件

3.)c.html:()

es6:

1.let/const

2.指标里的方法function能够省略

3.函数中的暗中同意参数

4.template

5.箭头函数

6.拓展操作符

7.解构赋值

8.Symbol

9.class 模拟类,但本质是根据原型的

10.for ...of

11.promise 清除回调金字塔.回调鬼世界

12.生成器函数,能够退出函数

13.JS模块化

其次个为写入写入的文本内容

<script>

    var script = document.createElement('script');

    script.type = 'text/javascript';

 

    // 传参并钦赐回调实施函数为onBack

    script.src = '';

    document.head.appendChild(script);

 

    // 回调试行函数

    function onBack(res) {

        alert(JSON.stringify(res));

    }

</script>

1.http哀求页面,不是该文件目录下的页面重定向,别的的依靠目录查找

var http = require("http"); //CommonJS标准 加载模块

var fs = require("fs");

var path = require("path");

var server = http.Server(); //创设服务器

server.on("request", function(req, res) {

var filepath = path.join(__dirname, "./www", req.url);

if(req.url === "/") {

filepath = path.join(filepath, "index/html");

}

try{

var stat = fs.statSync(filepath);

if(stat.isFile()) {

var content = fs.readFileSync(filepath);

res.setHeader("Content0length", Buffer.bytelength(content))

res.write(content);

}else if(stat.isDirectory() {

//当乞请的路线是目录的时候

})

}catch(e) {

//重定向301(永久) 302(暂时)

res.writeHead(302, {

"Location" : "/"

})

}

res.end();

})

server.listen(3000, function() {

console.log("server has started");

})

回调函数

1.)a.html:()

socketio 是对websocket合计封装的三个模块,让顾客端和劳务器端的写法都以均等的

socket.emit()发数据

socket.on()收数据

监听顾客端连接,回调函数会传递本次连接的socket

io.on('connection',function(socket));

给持有顾客端广播音信

io.sockets.emit('String',data);

给内定的客商端发送信息

io.sockets.socket(socketid).emit('String', data);

监听顾客端发送的新闻

socket.on('String',function(data));

给该socket的顾客端发送音信

socket.emit('String', data);

3.WebSocket

new Websocket("ws:localhost/chat")

  • var http = require(“http”);
    var url = require(“url”);
    //创造服务器
    //http继承自tcp
    var server = http.createServer(function (req,res) {

        var urlstr = req.url;//获取哀告的路子
        var urlMethod = req.method;//获取央求的章程
        /*var urlObj = url.parse(urlstr,true);
        console.log(urlObj);*/
        //console.log(urlMethod);
        res.end(“hello”);
    });
    server.listen(8080);

var http = require('http');

var server = http.createServer();

var qs = require('querystring');

 

server.on('request', function(req, res) {

    var postData = '';

 

    // 数据块接受中

    req.addListener('data', function(chunk) {

        postData  = chunk;

    });

 

    // 数据选用达成

    req.addListener('end', function() {

        postData = qs.parse(postData);

 

        // 跨域后台装置

        res.writeHead(200, {

            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie

            'Access-Control-Allow-Origin': '',    // 允许访问的域(公约 域名 端口)

            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本不能读取cookie

        });

 

        res.write(JSON.stringify(postData));

        res.end();

    });

});

 

server.listen('8080');

console.log('Server is running at port 8080...');

gulp

npm init

npm install gulp --save-dev

新建 gulpfile.js(默许试行的文本)

乐百家前段 ,//gulpfile.js

//1.配备职分, 2.自行推行

var gulp = require("gulp");

var uglify = require("gulp-uglify");

//task1 概念八个职分ufligy 压缩js

gulp.task("uglify" ,function() {

gulp.src("./src/js/*.js")

.pipe(uglify())

.pipe(gulp.dest("./dist/js"))

})

安装gulp-uglify插件 npm install gulp-uglify --save-dev

新建src文件夹 > js文件夹 >demo.js

新建dist文件夹> js文件夹 >

运行 gulp uglify

下一场在dist文件夹就会找到已经压缩的demo.js

插件:gulp-less

插件:gulp-minify-css

//文件看守, 监听./src/less/*.less 文件的变动,变化运转该less职务

gulp.task("default", ["uglify", "less"], function() {

gulp.watch("./src/less/*.less", ["less"]);

})

//运维 gulp就能够就算改换代码

  • fs.realpath(“test”, function (err,path) {

        console.log(path);
    });

 

webpack

全局安装webpack npm install webpack --save-dev

新建文件夹webpack

1.开端化三个门类 npm init

name:不能为webpack

2.在该文件夹上面设置npm install webpack --save-dev

  1. webpack 能源模块化

webpack ./app/main.js ./app/bundle.js

  1. mongodb 非关系型数据库

mongoose Nodejs操作mongodb数据库的模块

事例2:读取文件操作

 

fs模块(读写文件)

var fs = require("fs");//加载模块

//异步读取文件

fs.readFile("./readme.txt","utf8", (err, data) => {

if(err) throw err;

console.log(data);

});

//同步读取文件 Synchrous

var data = fs.readFileSync("./readme.txt","utf8");

console.log(data);

//异步写入文件

fs.writeFile("./test.txt", "This is test content~~~",(err) => {

if(err)throw err;

console.log("写入成功");

})

console.log("write");

//同步写入文件

fs.writeFileSync("./test.txt", "This is test content~~~");

console.log("write");

翻看路线消息stat:fs.stat(path, (err, stat) => {})

fs.stat("./test", (err, stat) => {

if(err) throw err;

console.log(stat);

if(stat.isFile()) {

console.log("该路径为文件");

}else if (stat.isDirectory()) {

console.log("该路径为文件夹");

}

})

  • console.log(util.inspect(obj));

 

path模块

var path = require("path"); //加载模块

path.dirname(url) 获取目录名

path.extname(url)获取后缀名

path.join([...paths]) 拼接路线

var url = "";

var p1 = path.basename(url,".html");

console.log(p1); //path

var p2 = path.dirname(url);

console.log(p2); //

var p3 = path.extname(url);

console.log(p3); //.html

var p4 = path.join(__dirname, "./a", "../b", "c");

console.log(p4); //E:nodenodejs_2bc

移除掉单个事件

var proxy = function(url, callback) {

    var state = 0;

    var iframe = document.createElement('iframe');

 

    // 加载跨域页面

    iframe.src = url;

 

    // onload事件会触发2次,第1次加载跨域页,并存在数据于window.name

    iframe.onload = function() {

        if (state === 1) {

            // 第2次onload(同域proxy页)成功后,读取同域window.name中多少

            callback(iframe.contentWindow.name);

            destoryFrame();

 

        } else if (state === 0) {

            // 第1次onload(跨域页)成功后,切换成同域代理页面

            iframe.contentWindow.location = '';

            state = 1;

        }

    };

 

    document.body.appendChild(iframe);

 

    // 获取数据以往销毁那么些iframe,释放内部存款和储蓄器;那也确定保证了安全(不被别的域frame js访谈)

    function destoryFrame() {

        iframe.contentWindow.document.write('');

        iframe.contentWindow.close();

        document.body.removeChild(iframe);

    }

};

 

// 央浼跨域b页面数据

proxy('', function(data){

    alert(data);

});

http协议:

HyperText Transport Protocol)是超文本传输左券的缩写.

http央求:get/post/put/delete(get在地址栏,传输速度快,大小有限定.在头,只可以传输一些文书;post加密传输,在正文)

能够发起http央求的方法:浏览器/postman/curl/Fiddle/php/node.js

http1.0和http1.1的区别:1.0是历次乞请都创建八个总是,而1.1是多少个央求贰个连接.

报文:请求头(post有content-type:"application-x-www-form-urlencoded", cookie) 正文

xhr.readystate

XMLHttpRequest.UNSENT  0        早先化连接

XMLHttpRequest.OPENED  1        连接创设

XMLHttpRequest.HEADER_RECEIVED 2  选拔到央浼头

XMLHttpRequest.LOADING  3        管理多少

XMLHttpRequest.DONE    4        管理完结

xhr.status HTTP响应状态码

1早先  101 切换公约

2开头  成功  200

3开头  重定向  304 301/302

4带头  客户端错误  404 403

5起初  服务器端错误

能够先写三个129k的公文

3.)vue.js:

3.websocket 创设实时应用(你猜作者画,录像直播)

全双工、双向数据、长连接的商业事务,h5新增添性子

服务器端能够主动向浏览器端发送音讯

总得浏览器要协助,服务器要支持,数据传输格式是Frame

经过:第2回是由客商端发起,伏乞的报文的伸手头会多一些剧情,供给服务器改变左券.

劳务器端响应回报文,响应头也会多几条数据,之后就能够创设长的连接.

a. 发起呼吁,跟日常的http诉求例外的地点,

请求头 包括:

Sec-WebSocket-Key:asgK0L1sVa22xbiq8MU58w==

Sec-WebSocket-Version:13

Upgrade:websocket

让服务器更新切换合同 websocket

b. 服务器收到央求,upgrade

经过一定的步调算法 爆发

Sec-WebSocket-Accept:IQcF4EGKE8sALj3PxJRvYQ1iG2Y

2.  npm init

npm install socketio express --save-dev

normalize:标准化字符串路线

 

经过数组

九、 WebSocket磋商跨域

事件概念

 

Node中推荐介绍应用的措施

 

  • fs.mkdir(“test”,0777, function (err) {
        if(err){
            console.error(err);
        }
    });
  • mode 的多少个数字,分别代表owner(全数者),group(组客户),others(其余客商)所具备的权能。
     1 = x 施行 2 = w 写 4 = r 读,举个例子owner具有全数权限,1 2 4=7,
     又举个例子group 具有读 和执行权限 1 4 = 5

/*

* 导入包:import javax.servlet.http.HttpServletResponse;

* 接口参数中定义:HttpServletResponse response

*/

response.setHeader("Access-Control-Allow-Origin", "");  // 若有端口需写全(公约 域名 端口)

response.setHeader("Access-Control-Allow-Credentials", "true");

  • var buff = new Buffer([0xe5, 0x94, 0x90, 0xe8, 0x8f, 0x9c, 0xe4, 0xb9, 0x9f]);
  • console.log(buf4.toString())

 

相对路线获取相对路线

1.) 财富跳转: A链接、重定向、表单提交

任何格局

 

目录操作

 

http模块深入解说

当下,全体浏览器都帮衬该意义(IE8 :IE8/9内需选择XDomainRequest对象来扶植CO奇骏S)),COENVISIONS也早已成为主流的跨域应用方案。

将buffer转成字符串通过toString

var express = require('express');

var proxy = require('http-proxy-middleware');

var app = express();

 

app.use('/', proxy({

    // 代理跨域目的接口

    target: '',

    changeOrigin: true,

 

    // 改过响应头音信,完毕跨域并同意带cookie

    onProxyRes: function(proxyRes, req, res) {

        res.header('Access-Control-Allow-Origin', '');

        res.header('Access-Control-Allow-Credentials', 'true');

    },

 

    // 校正响应音信中的cookie域名

    cookieDomainRewrite: 'www.domain1.com'  // 可感觉false,表示不改正

}));

 

app.listen(3000);

console.log('Proxy server is listen at port 3000...');

Stream可以算是node里的一出中央,与大额管理方面有明细不可分的涉嫌

 

读取目录

 

  • console.log(path.resolve(“/test/index.html”));
    console.log(path.resolve(‘wwwroot’, ‘static_files/png/‘, ‘../gif/image.gif’));
    console.log(path.resolve(“../7.fs/img.js”));

 

先是个参数为写入的公文名

3.) AJAX 央求无法发送

  • <!DOCTYPE html>
    <html lang=“en”>
    <head>
        <meta charset=“UTF-8”>
        <title>那是表单页的标题</title>
    </head>
    <body>
    <!—
        若无公文的话可以选拔application/x-www-form-urlencoded
        但是要是有文件的话确定更要用multipart/form-data
    —>
    <form action=“/upimg” method=“post” enctype=“multipart/form-data”>
        用户名: <input type=“text” name=“user”><br>
        密码: <input type=“password” name=“pass”><br>
        上传图片: <input type=“file” name=“file1”><br>
        <input type=“submit” value=“**提交**”>
    </form>
    </body>
    </html>

 

  • var http = require(“http”);
    //request函数允许后台公布恳求,第二个参数是贰个目的恐怕字符串
    var options = {
            host: ‘localhost’,
            port: ‘8080’,
            path: ‘/reg’,
            method:”POST”,
            headers:{
                “Content-Type”:”application/json”
            }
    };
    /*
    * request :发请求
    * http.request() 再次回到二个http.ClientRequest类的实例。ClientRequest实例是二个可写流对象。
    * 假使须求用POST央浼上传贰个文本的话,就将其写入到ClientRequest对象
    * */
    var request = http.request(options, function (res) {
        console.log(res.statusCode);
        //获取响应回来的内容
        res.setEncoding(“utf8”);
        res.on(“data”, function (chunk) {

            console.log(chunk);
        });
    });
    request.write(‘{“user”:”tangcaiye”,”pass”:”12345”}’);
    request.end();//停止写伏乞体,真正向服务器发起号召

2、 document.domain iframe跨域

  • var http = require(“http”);
    var url = require(“url”);
    var fs = require(“fs”);
    var query string = require(“query string”);
    var formidable = require(“formidable”);
    //创建服务器
    //http继承自tcp
    var server = http.createServer(function (req,res) {

        //获取央求的门径
        var urlObj = url.parse(req.url,true);
        var pathname = urlObj.pathname;

        if(pathname == “/upimg.html”){
            var rs = fs.createReadStream(“./upimg.html”);
            rs.pipe(res);
        }else if(pathname == “/upimg”){

            var form = new formidable.IncomingForm();
            form.parse(req, function (err,fields,files) {
                //田野先生s->以目的格式重临字段
                /*console.log(fields);
                console.log(files);*/
                //将暂存文件写入到upload文件目录中
                fs.createReadStream(files.file1.path).pipe(fs.createWriteStream(“./upload/“ files.file1.name));
                res.setHeader(“Content-Type”,”text/html;charset=utf8”);
                res.write(JSON.stringify(fields));
                res.end(‘<img src=“/upload/‘ files.file1.name ’”>’);
            });
        }else if(pathname != “/favicon.ico”){

            fs.createReadStream(“.” pathname).pipe(res);
        }
    });
    server.listen(8080);

1、 通过jsonp跨域

常用模块传授

此方案只限主域相似,子域不一致的跨域应用场景。

http——api讲解

达成思路:通过nginx配置三个代理服务器(域名与domain1相近,端口不一样)做跳板机,反向代理访谈domain2接口,並且能够顺便改过cookie中domain消息,方便当前域cookie写入,完成跨域登入。

  • fs.exists(“test/1.jpg”, function (exists) {

        console.log(exists);
    })

贯彻原理: a欲与b跨域相互通信,通过中间页c来促成。 四个页面,分裂域之间利用iframe的location.hash传值,相仿域之间一贯js访问来通讯。

  • var events = require(“events”);
    var util = require(“util”);

    function Girl(){
        //成立二个美人类,它抱有点平地风波
    }
    //要让美女两全事件措施要求先承袭events模块
    util.inherits(Girl,events);

    function Boy(name,response){
        this.name = name;
        this.response = response;
    }

    var boy1 = new Boy(“备胎1”,function (){

        console.log(“吃鸡腿”);
    });

    var boy2 = new Boy(“备胎2”, function (){

        console.log(“吃牛肉”);
    });

    • var girl = new Girl();
      girl.on(“lee”,boy1.response);
      girl.addListener(“lee”,boy2.response);
      girl.once(“die”,function (){
          console.log(“死了”);
      });

    girl.emit(“die”);//发射事件
    girl.emit(“die”);

日常说来为了缓和web服务器的负载,我们把js、css,img等静态财富抽离到另意气风发台独立域名的服务器上,在html页面中再经过相应的价签从差异地名下加载静态财富,而被浏览器允许,基于此原理,大家得以经过动态成立script,再央求二个带参网站实现跨域通讯。

  • var fs = require(‘fs’);
    function copy( src, dest ){
        fs.writeFileSync( dest, fs.readFileSync(src) );
    }
    copy(‘data.son’, ‘dataStream.json’);
  • 上边是三个对文本拷贝的代码,看似没什么难点,也真正在拍卖小文件的时候没什么大主题素材,不过大器晚成旦管理多少级十分的大的公文的时候能够见见,先将数据读收取来,在写入,内部存款和储蓄器作为中间转播,假设文件太大就能发生难点。

 

翻开文件恐怕目录详细情形

data: html5正经补助跋扈基本类型或可复制的目的,但部分浏览器只帮忙字符串,所以传参时最棒用JSON.stringify()系列化。

代码:

一、 通过jsonp跨域

  • girl.setMaxListeners(2);

// 前端安装是还是不是带cookie

xhr.withCredentials = true;

事件

 

  • var buff = new Buffer(12);//创制长度为12的数组console.log(buff);buf1.fill(255,0);//fill(填充的值,起头地方,甘休地点(未有既全体))console.log(buff);

1、 nginx配置搞定iconfont跨域

http模拟客户端

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

 

// 前端安装是不是带cookie

xhr.withCredentials = true;

 

xhr.open('post', '', true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send('user=admin');

 

xhr.onreadystatechange = function() {

    if (xhr.readyState == 4 && xhr.status == 200) {

        alert(xhr.responseText);

    }

};

改良文件名

 

  • console.log(path.join(__dirname,”a”,”b”,”..”,”c”));

 

fs

 

就算是大文件就得使用file system的别的多少个API,createReadStream和fs.createWriteStream,将文件作为一块一块小的数量流举办拍卖,实际不是一整块巨型数据

 

金镶玉裹福禄双全三回九转

var xhr = new XMLHttpRequest();

 

// 前端按键:浏览器是不是读写cookie

xhr.withCredentials = true;

 

// 访谈nginx中的代理服务器

xhr.open('get', '', true);

xhr.send();

  • //设置最大的监听数据
    girl.setMaxListeners(2);
    //girl.on(“lee”,boy1.response);
    girl.removeListener(“lee”,boy1.response);//移除掉单个事件
    girl.removeAllListeners(“lee”);
    girl.emit(“lee”);

var http = require('http');

var server = http.createServer();

var qs = require('querystring');

 

server.on('request', function(req, res) {

    var params = qs.parse(req.url.substring(2));

 

    // 向前台写cookie

    res.writeHead(200, {

        'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本不可能读取

    });

 

    res.write(JSON.stringify(params));

    res.end();

});

 

server.listen('8080');

console.log('Server is running at port 8080...');

  • on
  • addListener
  • once

浏览器跨域访问js、css、img等平常静态能源被同源计策许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,那时可在nginx的静态能源服务器中步向以下配置。

__dirname

 

取得事件模块

var http = require('http');

var socket = require('socket.io');

 

// 启http服务

var server = http.createServer(function(req, res) {

    res.writeHead(200, {

        'Content-type': 'text/html'

    });

    res.end();

});

 

server.listen('8080');

console.log('Server is running at port 8080...');

 

// 监听socket连接

socket.listen(server).on('connection', function(client) {

    // 选取新闻

    client.on('message', function(msg) {

        client.send('hello:'   msg);

        console.log('data from client: ---> '   msg);

    });

 

    // 断开管理

    client.on('disconnect', function() {

        console.log('Client socket has closed.');

    });

});

 

例子:

 

  • function copy( src, dest ){
        fs.createReadStream( src ).pipe( fs.createWriteStream( dest ) );
    }
    copy(‘data.son’, ‘dataStream.json’);

2.) DOM 和 Js对象不可能获得

输出对象

 

认清文件是不是存在

nginx具体计划:

nodejs第二章节

 

写入文件

d.) 上边多少个现象的跨域数据传递

// 也或许现身内部存款和储蓄器爆仓 写入数据跟不上读取速度 一贯读取的文本不断放入内部存款和储蓄器中
// 但是多个操作速度相对是不均等的,于是未被写入的数量在内部存款和储蓄器中不断变大,就恐怕会招致内存的爆仓。
var fs = require(‘fs’);
var rs = fs.createReadStream(‘data.son’);
var ws = fs.createWriteStream(‘dataStream.json’)
rs.on(‘data’,function(chunk){
    console.log(‘data chunk read ok’);
    times ;
    ws.write(chunk,function(){
        console.log(‘data chunk write ok’);
    });
});
rs.on(‘end’,function(){
    console.log(times);
});

1.)前端代码:

本文由乐百家前段发布,转载请注明来源:【乐百家前段】后面一个常见跨域施工方案(全