如何在本地偽裝一個網(wǎng)站

1.編輯 hosts 文件
Mac：sudo vi/etc/hosts
Windows：hosts 文件的路徑是:C:\Windows\System32\Drivers\etc\hosts，可以使用記事本等文字編輯器打開
2.添加一行 127.0.0.1 xxx.com
3.保存關(guān)閉
4.訪問 xxx.com 端口號

如何監(jiān)聽 80 端口

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

瀏覽器的同源策略

同源指的是協(xié)議相同，域名相同，端口相同。不同源的客戶端腳本在沒明確授權(quán)的情況下，不能讀寫對方的資源。

http://zhihu.com 這個網(wǎng)址，協(xié)議是 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

同源政策的目的，是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。

限制范圍

1.Cookie、LocalStorage 和 IndexDB 無法讀取。
2.DOM 無法獲得。
3.AJAX 請求不能發(fā)送。

CORS

CORS是跨源資源分享（Cross-Origin Resource Sharing）的縮寫。當一個資源從與該資源本身所在的服務(wù)器不同源請求一個資源時，資源會發(fā)起一個跨域 HTTP 請求。

1.簡單模式 （GET、POST）

目標服務(wù)器在響應(yīng)頭里添加 Access-Control-Allow-Origin: http://xxx.com 即可,服務(wù)端僅允許來自 http://xxx.com 的訪問

2.復雜模式（除了GET、POST）

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

會發(fā)兩次請求，第一次是 OPTIONS 請求，詢問目標服務(wù)器是否允許 PUT/PAT等，如果允許，則發(fā)真正的請求。

JSONP

JSONP是服務(wù)器與客戶端跨源通信的常用方法。

它的基本思想是，網(wǎng)頁通過添加一個 script 元素，向服務(wù)器請求JSON數(shù)據(jù)，這種做法不受同源政策限制；服務(wù)器收到請求后，將數(shù)據(jù)放在一個指定名字的回調(diào)函數(shù)里傳回來。

1.讓目標網(wǎng)站在一個 xxx.js 里放置數(shù)據(jù)，形式是 JSON + Padding

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

2.本網(wǎng)站使用 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 的區(qū)別

1.原理 JSONP 是 script，AJAX 是 JS 發(fā)出的請求
2.JSONP 只能 GET，AJAX 都行
3.JSONP 不太安全，因為大家都可以訪問（沒有限制），AJAX 有跨域限制