跨域

2017-08-11 本文已影响0人 shadow123

如何在本地伪装一个网站

1.编辑 hosts 文件
Mac：sudo vi/etc/hosts
Windows：hosts 文件的路径是:C:\Windows\System32\Drivers\etc\hosts，可以使用记事本等文字编辑器打开
2.添加一行 127.0.0.1 xxx.com
3.保存关闭
4.访问 xxx.com 端口号

如何监听 80 端口

Mac：sudo http-server -c-1 -p 80
Windows :
1.以管理员身份运行 git bash
2.http-server -c-1 -p 80

浏览器的同源策略

同源指的是协议相同，域名相同，端口相同。不同源的客户端脚本在没明确授权的情况下，不能读写对方的资源。

http://zhihu.com 这个网址，协议是 http://，域名是 zhihu.com，端口是80（默认端口可以省略）。

下面都不同源

1. http://zhihu.com vs http://www.zhihu.com
2. http://zhihu.com vs https://zhihu.com
3. http://zhihu.com vs http://zhihu.com:81
4. http://zhihu.com vs http://zhihu.com.cn

only http://zhihu.com vs http://zhihu.com

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

限制范围

1.Cookie、LocalStorage 和 IndexDB 无法读取。
2.DOM 无法获得。
3.AJAX 请求不能发送。

CORS

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。当一个资源从与该资源本身所在的服务器不同源请求一个资源时，资源会发起一个跨域 HTTP 请求。

1.简单模式（GET、POST）

目标服务器在响应头里添加 Access-Control-Allow-Origin: http://xxx.com 即可,服务端仅允许来自 http://xxx.com 的访问

2.复杂模式（除了GET、POST）

Access-Control-Allow-Origin: http://xxx.com
Access-Control-Allow-Methods: POST, GET, OPTIONS, PATCH, DELETE, HEAD

会发两次请求，第一次是 OPTIONS 请求，询问目标服务器是否允许 PUT/PAT等，如果允许，则发真正的请求。

JSONP

JSONP是服务器与客户端跨源通信的常用方法。

它的基本思想是，网页通过添加一个 script 元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

1.让目标网站在一个 xxx.js 里放置数据，形式是 JSON + Padding

window.qqUser = {
  "name":"frank",
  "qb":10000
}

2.本网站使用 script 加载 xxx.js

var script = document.createElement('script');
script.src = 'http://qq.com/xxx.js';
document.head.appendChild(script);

3.约定用 callback=xxx 来交流

function jsonp(url,fn){
  var functionName = 'frank' + parseInt(Math.random()*10000,10);
  window[functionName] = fn;
  var script = document.createElement('script');
  script.src = url + '?callback=' + functionName;
  document.head.appendChild(script);
}

// nodejs
if(path === '/xxx.js'){
  var callback = query.callback
  var string = fs.readFileSync('./xxx.js', 'utf8')
  response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
  setTimeout(function(){
    response.end(string.replace('{{callback}}', callback))
  }, Math.random() * 1000)
}

{{callback}}({
  "name":"frank",
  "qb":10000
})

4.jQuery 用法

$.ajax({
  url:'http://qq.com/xxx.js',
  dataType:'jsonp',
  success:function(data){
    console.log('第一次')
    console.log(data)
  }
})

JSONP 和 AJAX 的区别

1.原理 JSONP 是 script，AJAX 是 JS 发出的请求
2.JSONP 只能 GET，AJAX 都行
3.JSONP 不太安全，因为大家都可以访问（没有限制），AJAX 有跨域限制

跨域