摘要：代碼第日前瞻中國沖擊金博爾特再戰(zhàn)米羽球正直播柴飚洪煒出戰(zhàn)男雙力爭會師決賽女排將死磕巴西郎平安排男陪練模仿對方核心執(zhí)行結果用，不跨域的打開發(fā)送請求時，請求頭內(nèi)部沒有當我用打開，出現(xiàn)跨域時。

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

同協(xié)議：如都是http或者https
同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
同端口：如都是80端口
舉個例子

http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (同源)

不同源
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 和 http://jirengu.com:8080/a.php (端口不同,第一個是80)

首先打開hosts文件（window的地址是C:WindowsSystem32driversetchosts ），添加兩條host記錄

新建一個index.html文件，里面實現(xiàn)一個ajax獲取數(shù)據(jù)的功能

hello world

新建一個js文件，里面實現(xiàn)一個靜態(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)

gitbash cd到當前文件夾，通過node server.js打開服務器。
在瀏覽器輸入localhost:8080，結果成功獲取ajax數(shù)據(jù)

我把ajax請求地址改成http://a.com:8080/getWeather，結果報錯了

我把瀏覽器的地址改為a.com 把ajax的地址改為b.com或者localhost，或者127.0.0.1都會出現(xiàn)跨域報錯，即使他們的地址都是指向服務器。

HTML 中 script 標簽可以加載其他域下的js，也就是說script的src能使用任何網(wǎng)站對應得文件，只要該網(wǎng)站愿意去提供這個東西。

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

這樣我們可以和后端商量一下，這樣執(zhí)行：

前端提前定義好showdata這個函數(shù)。當這個請求到達后端后，后端會去解析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”: “晴天”}。

總結：JSONP是通過 script 標簽加載數(shù)據(jù)的方式去獲取數(shù)據(jù)并把數(shù)據(jù)當做 JS 代碼來執(zhí)行。 提前在頁面上聲明一個函數(shù)，函數(shù)名通過接口傳參的方式傳給后臺，后臺解析到函數(shù)名后在原始數(shù)據(jù)上「包裹」這個函數(shù)名，發(fā)送給前端。換句話說，JSONP 需要對應接口的后端的配合才能實現(xiàn)。

2.1代碼

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)

  

    

    
    show news
  

打開終端，cd到對應的文件夾，輸入 node server.js ，瀏覽器打開 http://localhost:8080/index.html。

2.2執(zhí)行結果

![clipboard.png](/img/bVbk

2.3分析

2.3.1

res.end(pathObj.query.callback + "(" + JSON.stringify(news) + ")")

數(shù)組和字符串相加，會把數(shù)組toString(),將數(shù)組轉(zhuǎn)換為以‘,’分隔的字符串【1,2,3】=>"1,2,3"。如果我不用json.stringify傳遞的news就是一個字符串，html里面就無法當成數(shù)組使用

2.3.2

 if(pathObj.query.callback){
 res.end(pathObj.query.callback + "(" + JSON.stringify(news) + ")")

以下是pathobj的輸出值，可以看到pathObj.query是一個對象，所以才可以使用pathObj.query.callback獲取對應的值

2.3.3

 function appendHtml(news){
    console.log(news);  
    var html = "";
    for( var i=0; i";
    }
    console.log(html);
    $(".news").innerHTML = html;
  }

appendHtml函數(shù)收到的參數(shù)news是一個數(shù)組，和html參數(shù)是一個字符串

2.3.4

 script.src = "http://127.0.0.1:8080/getNews?callback=appendHtml";
    document.head.appendChild(script);
    document.head.removeChild(script);

把script放在document.head，是為了讓這句代碼執(zhí)行發(fā)送請求。刪除removechild，是為了美觀，如果不刪除，每次點擊news都會重新產(chǎn)生一個script。如下圖我點擊news一次，head就會新增一個script

關于cors，我只是記錄了一個簡單的情況，經(jīng)用于入門。詳細可以看這篇文章跨域資源共享 CORS 詳解

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

當你使用 XMLHttpRequest 發(fā)送請求時，瀏覽器發(fā)現(xiàn)該請求不符合同源策略，會給該請求加一個請求頭：Origin。
后臺進行一系列處理，如果確定接受請求則在返回結果中加入一個響應頭：Access-Control-Allow-Origin（允許訪問控制的域）和對應的值;
瀏覽器判斷該相應頭中是否包含 Origin 的值，如果有則瀏覽器會處理響應，我們就可以拿到響應數(shù)據(jù)，如果不包含瀏覽器直接駁回，這時我們無法拿到響應數(shù)據(jù)。

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")
      //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
  

用http://127.0.0.1:8080/index.html，不跨域的打開index.html發(fā)送請求時，請求頭內(nèi)部沒有origin

當我用http://localhost:8080打開index.html，出現(xiàn)跨域時。
請求頭內(nèi)部有Origin: http://localhost:8080，響應頭有Access-Control-Allow-Origin: http://localhost:8080。兩者相等，正常的獲取數(shù)據(jù)

當我使用了a.com打開index.html時（我修改了host文件讓a.com也指向127的本機服務器地址），出現(xiàn)了報錯。因為服務器不允許a.com的網(wǎng)頁使用資源

res.setHeader("Access-Control-Allow-Origin","http://localhost:8080")
//res.setHeader("Access-Control-Allow-Origin","*")

這個表示服務器添加允許控制的域?qū)牡刂罚?表示允許所有接口用服務器的資源

網(wǎng)頁的內(nèi)聯(lián)iframe和網(wǎng)頁不同源，我們不能通過js操作該iframe.比如我們在自己的網(wǎng)站上嵌套一個淘寶的frame，等用戶先登陸了淘寶，然后登陸我們的網(wǎng)頁的時候，處于frame的淘寶也是登陸狀態(tài)，如果我能用js去操作這個用戶的淘寶，那我就可以做很多壞事了。
2、舉個例子

  




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

    
  

  

首先修改host文件，把a.com和b.com指向127.0.0.1，打開http-server。

用a.com網(wǎng)址打開a.html，其中b.jrg.com的iframe的地址是b.com，和網(wǎng)頁不同源的。可以看到該frame可以正確加載，但我們不能用js操作它

用b.com地址打開a.html，其中b.jrg.com的iframe的地址是b.com，和網(wǎng)頁同源。我們就可以用js去操作該iframe。

如果當前頁面和iframe域名后面部分一致都是jrg.com，我們可以使用document.domain = "jrg.com"降域的方式來實現(xiàn)跨域

通過postMessage實現(xiàn)不同主域下frame的操作

window.frames[0].postMessage(this.value,"*");//* ,表示任何域下都可接受請求

 window.parent.postMessage(this.value, "*");

    
    
    
    






    
使用postMessage實現(xiàn)跨域
    

        
    

    





    

打開http-server，查看結果