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

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

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

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

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

不同源情況：

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

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

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

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

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

（2）建一個index.html文件，獲取數據

hello world

（3）建一個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 "/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）執行結果

打開終端，cd 到當前文件夾，然后輸入node server.js，啟動靜態服務器

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

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

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

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

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

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

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

可以這樣子實現從其他域下獲取數據

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

此時需要后端的配合，因為后端的接口需要根據約定的參數獲取回調函數名，然后跟返回數據進行拼接，最后進行響應

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

之前后端返回數據： {"city": "hangzhou", "weather": "晴天"}

現在后端返回數據： showData({"city": "hangzhou", "weather": "晴天"})

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

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

當然前端提前在頁面定義好showData這個全局函數，在函數內部處理參數即可。

總結一下：

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

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

換句話說，JSONP 需要對應接口的后端的配合才能實現

舉個例子

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金 博爾特再戰200米羽球",
        "正直播柴飚/洪煒出戰 男雙力爭會師決賽",
        "女排將死磕巴西！郎平安排男陪練模仿對方核心"
        ]
      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，啟動靜態服務器

顯示結果：

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

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

實現方式：

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

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

（2）如果有則瀏覽器會處理響應，我們就可以拿到響應數據。

（3）如果不包含瀏覽器直接駁回，這時我們無法拿到響應數據。

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

舉個例子

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金 博爾特再戰200米羽球",
        "正直播柴飚/洪煒出戰 男雙力爭會師決賽",
        "女排將死磕巴西！郎平安排男陪練模仿對方核心"
        ]

      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
  

顯示結果

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

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

? 響應頭有Access-Control-Allow-Origin: http://localhost:8080

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

? 表示兩者相同，可以獲取數據

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

因為服務端不允許a.com 獲取數據

響應頭 Access-Control-Allow-Origin 設置為星號，表示同意任意跨源請求

Access-Control-Allow-Origin: "*"

那么http://a.com:8080/index.html就能獲取數據啦!

（1）iframe 不同源

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

舉個例子

a.html

    






    
使用降域實現跨域
    

        
    
    

b.html

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

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

用a.com 打開a.html, http://a.com:8080/a.html , 其中頁面iframe的地址是b.com，和網頁不同源的。可以看到該frame可以正確加載，但我們不能用js操作它

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

（2）修改源 document.domain

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