摘要：一同源策略瀏覽器出于安全方面的考慮，只允許與本域下的接口交互。包括發(fā)送信息的內(nèi)容，發(fā)送信息的域名等等同樣的，在內(nèi)添加一個事件監(jiān)聽綁定事件，在內(nèi)通過方法發(fā)送信息給一樣可以進行跨域通信

瀏覽器出于安全方面的考慮，只允許與本域下的接口交互。不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方的資源。

所謂“同源”指的是”三個相同“。相同的域名、端口和協(xié)議，這三個相同的話就視為同一個域，本域下的JS腳本只能讀寫本域下的數(shù)據(jù)資源，無法訪問其它域的資源。

協(xié)議相同 (都是http或者https)

域名相同 (都是http://jirengu.com/a> 和 和...

不同源情況：

http://jirengu.com/main.js> 和 https://jirengu.com/a.php (協(xié)議不同)

http://jirengu.com/main.js> 和 http://bbs.jirengu.com/a.php (域名不同，域名必須完全相同才可以)

http://jiengu.com/main.js> 和... (端口不同,第一個是80)

（1）修改host文件：給host文件里添加兩條記錄，方便跨域操作

上圖意思是訪問 a.com 或是 b.com 相當于訪問本機, 可以實現(xiàn)一個場景：瀏覽器是a.com，而接口是b.com,雖說最終對應(yīng)的是本機，但是域名不一樣

（2）建一個index.html文件，獲取數(shù)據(jù)

hello world

（3）建一個server.js文件，實現(xiàn)靜態(tài)文件、動態(tài)路由功能

var http = require("http")
var fs = require("fs")
var path = require("path")
var url = require("url")

http.createServer(function(req, res){

  var pathObj = url.parse(req.url, true)

  switch (pathObj.pathname) {
    case "/getWeather":
      res.end(JSON.stringify({beijing: "sunny"}))
      break;

    default:
      fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
        if(e){
          res.writeHead(404, "not found")
          res.end("
404 Not Found
")
        }else{
          res.end(data)
        }
      }) 
  }
}).listen(8080)

（4）執(zhí)行結(jié)果

打開終端，cd 到當前文件夾，然后輸入node server.js，啟動靜態(tài)服務(wù)器

A、瀏覽器地址欄輸入localhost:8080/index.html ,獲取到了數(shù)據(jù)

B、瀏覽器地址改為127.0.0.1:8080/index.html,就報錯啦，因為當前域名和請求域名不一樣

C、如果瀏覽器改成a.com或是b.com 也是會報錯的，就算它們都是指向同一個本機

總結(jié)一下：只有在請求域名和當前域名相同的情況下，才能獲取數(shù)據(jù)，才不會報錯。

注：跨域的資源內(nèi)嵌是被允許的，對于當前頁面來說頁面存放的 JS 文件的域不重要，重要的是加載該 JS 頁面所在什么域

解決同源策略帶來的不便，突破同源策略的限制去獲取不同源之間的數(shù)據(jù)信息或者進行不同源之間的信息傳遞。

HTML 中 script 標簽可以加載其他域下的js，比如我們經(jīng)常引入一個其他域下線上cdn的jQuery。

可以這樣子實現(xiàn)從其他域下獲取數(shù)據(jù)

這時候會向天氣接口發(fā)送請求獲取數(shù)據(jù)，獲取數(shù)據(jù)后做為 js 來執(zhí)行。 但這里有個問題， 數(shù)據(jù)是 JSON 格式的數(shù)據(jù)，直接作為 JS 運行的話,如何去得到這個數(shù)據(jù)來操作呢？

此時需要后端的配合，因為后端的接口需要根據(jù)約定的參數(shù)獲取回調(diào)函數(shù)名，然后跟返回數(shù)據(jù)進行拼接，最后進行響應(yīng)

這個請求到達后端后，后端會去解析callback這個參數(shù)獲取到字符串showData，在發(fā)送數(shù)據(jù)做如下處理：

之前后端返回數(shù)據(jù)： {"city": "hangzhou", "weather": "晴天"}

現(xiàn)在后端返回數(shù)據(jù)： showData({"city": "hangzhou", "weather": "晴天"})

前端script標簽在加載數(shù)據(jù)后會把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做為 js 來執(zhí)行。

這實際上就是調(diào)用showData這個函數(shù)，同時參數(shù)是 {“city”: “hangzhou”, “weather”: “晴天”}。

當然前端提前在頁面定義好showData這個全局函數(shù)，在函數(shù)內(nèi)部處理參數(shù)即可。

總結(jié)一下：

（1）JSONP是通過 script 標簽加載數(shù)據(jù)的方式去獲取數(shù)據(jù)當做 JS 代碼來執(zhí)行

（2）提前在頁面上聲明一個函數(shù)，函數(shù)名通過接口傳參的方式傳給后臺，后臺解析到函數(shù)名后在原始數(shù)據(jù)上「包裹」這個函數(shù)名，發(fā)送給前端。

換句話說，JSONP 需要對應(yīng)接口的后端的配合才能實現(xiàn)

舉個例子

server.js 文件

var http = require("http")
var fs = require("fs")
var path = require("path")
var url = require("url")

http.createServer(function(req, res){
  var pathObj = url.parse(req.url, true)

  switch (pathObj.pathname) {
    case "/getNews":
      var news = [
        "第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)200米羽球",
        "正直播柴飚/洪煒出戰(zhàn) 男雙力爭會師決賽",
        "女排將死磕巴西！郎平安排男陪練模仿對方核心"
        ]
      res.setHeader("Content-Type","text/json; charset=utf-8")
      if(pathObj.query.callback){
        res.end(pathObj.query.callback + "(" + JSON.stringify(news) + ")")
      }else{
        res.end(JSON.stringify(news))
      }

      break;

    default:
      fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
        if(e){
          res.writeHead(404, "not found")
          res.end("
404 Not Found
")
        }else{
          res.end(data)
        }
      }) 
  }
}).listen(8080)

html文件

  

    

    
    show news
  

打開終端，cd 到當前文件夾，然后輸入node server.js，啟動靜態(tài)服務(wù)器

顯示結(jié)果：

圖中Request URL :http://127.0.0.1:8080/getNews?callback=appendHtml 會向瀏覽器發(fā)請求，得到數(shù)據(jù),然后當成 js 去執(zhí)行，因為頁面上已經(jīng)有了appendHtml函數(shù),然后去執(zhí)行這個函數(shù)，把appendHtml 括號里的內(nèi)容作為參數(shù)傳遞進去

全稱是跨域資源共享（Cross-Origin Resource Sharing），是一種 ajax 跨域請求資源的方式，支持現(xiàn)代瀏覽器，IE支持10以上。

實現(xiàn)方式：

當你使用 XMLHttpRequest 發(fā)送請求時，瀏覽器發(fā)現(xiàn)該請求不符合同源策略，會給該請求加一個請求頭：Origin，后臺進行一系列處理：

（1）如果確定接受請求則在返回結(jié)果中加入一個響應(yīng)頭：Access-Control-Allow-Origin; 瀏覽器判斷該相應(yīng)頭中是否包含 Origin 的值。

（2）如果有則瀏覽器會處理響應(yīng)，我們就可以拿到響應(yīng)數(shù)據(jù)。

（3）如果不包含瀏覽器直接駁回，這時我們無法拿到響應(yīng)數(shù)據(jù)。

所以 CORS 的表象是讓你覺得它與同源的 ajax 請求沒啥區(qū)別，代碼完全一樣。

舉個例子

server.js文件

var http = require("http")
var fs = require("fs")
var path = require("path")
var url = require("url")

http.createServer(function(req, res){
  var pathObj = url.parse(req.url, true)

  switch (pathObj.pathname) {
    case "/getNews":
      var news = [
        "第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)200米羽球",
        "正直播柴飚/洪煒出戰(zhàn) 男雙力爭會師決賽",
        "女排將死磕巴西！郎平安排男陪練模仿對方核心"
        ]

      res.setHeader("Access-Control-Allow-Origin","http://localhost:8080")
      //訪問控制允許的域 http://localhost:8080
      //res.setHeader("Access-Control-Allow-Origin","*")
      res.end(JSON.stringify(news))
      break;
    default:
      fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
        if(e){
          res.writeHead(404, "not found")
          res.end("
404 Not Found
")
        }else{
          res.end(data)
        }
      }) 
  }
}).listen(8080)

index.html文件

  

    


    
    show news
  

顯示結(jié)果

（1）輸入http://127.0.0.1:8080/index.html 發(fā)送請求時，不需要跨域，請求頭什么都沒有

（2）輸入http://localhost:8080/index.html，此時出現(xiàn)跨域

? 響應(yīng)頭有Access-Control-Allow-Origin: http://localhost:8080

? 請求頭有Origin: http://localhost:8080

? 表示兩者相同，可以獲取數(shù)據(jù)

（3）輸入http://a.com:8080/index.html 時，就報錯啦

因為服務(wù)端不允許a.com 獲取數(shù)據(jù)

響應(yīng)頭 Access-Control-Allow-Origin 設(shè)置為星號，表示同意任意跨源請求

Access-Control-Allow-Origin: "*"

那么http://a.com:8080/index.html就能獲取數(shù)據(jù)啦!

（1）iframe 不同源

iframe里面加載的頁面，它的域名,如果和我當前的是屬于不同域，雖然iframe里面的東西可以加載，但外部的js無法去獲取或操作的。
也就是說，只有在相同域名下的iframe，才可以去訪問里面的東西

舉個例子

a.html

    






    
使用降域?qū)崿F(xiàn)跨域
    

        
    
    

b.html

同樣先是host 文件添加兩條記錄

打開終端，cd 到當前文件夾，啟動http-server

用a.com 打開a.html, http://a.com:8080/a.html , 其中頁面iframe的地址是b.com，和網(wǎng)頁不同源的?？梢钥吹皆揻rame可以正確加載，但我們不能用js操作它

用b.com 打開a.html, http://b.com:8080/a.html , 其中frame 的地址是b.com，和網(wǎng)頁同源的，現(xiàn)在我們就可以用 js 獲取 iframe里面的內(nèi)容

（2）修改源 document.domain

當兩個url的主域名不同，但子域名相同的情況下，我們可以通過