跨域

MageekChiu 發(fā)布于2019-08-23 13:55 / 1668人閱讀

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

一、同源策略

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

1、本域

同協(xié)議：如都是http或者h(yuǎn)ttps
同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
同端口：如都是80端口
舉個(gè)例子

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 (端口不同,第一個(gè)是80)

2、通過ajax獲取數(shù)據(jù)，演示同源和不同源

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

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

hello world

新建一個(gè)js文件，里面實(shí)現(xiàn)一個(gè)靜態(tài)路由功能的服務(wù)器

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到當(dāng)前文件夾，通過node server.js打開服務(wù)器。
在瀏覽器輸入localhost:8080，結(jié)果成功獲取ajax數(shù)據(jù)

我把a(bǔ)jax請(qǐng)求地址改成http://a.com:8080/getWeather，結(jié)果報(bào)錯(cuò)了

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

二、JSONP(JSON with padding) 1、概念

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

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

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

前端提前定義好showdata這個(gè)函數(shù)。當(dāng)這個(gè)請(qǐng)求到達(dá)后端后，后端會(huì)去解析callback這個(gè)參數(shù)獲取到字符串showData，在發(fā)送數(shù)據(jù)做如下處理：
之前后端返回?cái)?shù)據(jù)： {"city": "hangzhou", "weather": "晴天"} 現(xiàn)在后端返回?cái)?shù)據(jù)： showData({"city": "hangzhou", "weather": "晴天"}) 前端script標(biāo)簽在加載數(shù)據(jù)后會(huì)把「showData({“city”: “hangzhou”, “weather”: “晴天”})」做為 js 來執(zhí)行。實(shí)際上就是調(diào)用showData這個(gè)函數(shù)，同時(shí)參數(shù)是 {“city”: “hangzhou”, “weather”: “晴天”}。

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

2、舉個(gè)栗子

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) 男雙力爭會(huì)師決賽",
        "女排將死磕巴西！郎平安排男陪練模仿對(duì)方核心"
        ]
      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)

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

2.2執(zhí)行結(jié)果

![clipboard.png](/img/bVbk

2.3分析

2.3.1

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

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

2.3.2

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

以下是pathobj的輸出值，可以看到pathObj.query是一個(gè)對(duì)象，所以才可以使用pathObj.query.callback獲取對(duì)應(yīng)的值

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是一個(gè)數(shù)組，和html參數(shù)是一個(gè)字符串

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ā)送請(qǐng)求。刪除removechild，是為了美觀，如果不刪除，每次點(diǎn)擊news都會(huì)重新產(chǎn)生一個(gè)script。如下圖我點(diǎn)擊news一次，head就會(huì)新增一個(gè)script

三、CORS

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

1、概念

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

2、實(shí)現(xiàn)原理

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

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

      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

4、執(zhí)行結(jié)果

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

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

當(dāng)我使用了a.com打開index.html時(shí)（我修改了host文件讓a.com也指向127的本機(jī)服務(wù)器地址），出現(xiàn)了報(bào)錯(cuò)。因?yàn)榉?wù)器不允許a.com的網(wǎng)頁使用資源

5、代碼解析

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

這個(gè)表示服務(wù)器添加允許控制的域?qū)?yīng)的地址，*表示允許所有接口用服務(wù)器的資源

四、降域 1、iframe和網(wǎng)頁不同源

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



  




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

首先修改host文件，把a(bǔ).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。

2、降域

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

五、postMessage

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

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

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




    
    
    
    Document




    
    
    
    Document






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

打開http-server，查看結(jié)果

GPU云服務(wù)器云服務(wù)器端跨域跨域 cdn跨域 SONP跨域

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99782.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

MageekChiu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow卷積神經(jīng)網(wǎng)絡(luò)

閱讀 2147·2023-04-25 16:53
SSM+JSP+MYSQL+H-UI 實(shí)現(xiàn)的校園點(diǎn)餐系統(tǒng)

閱讀 1544·2021-10-13 09:39
每秒新增8個(gè)用戶，HarmonyOS 2.0用戶達(dá)到9000萬

閱讀 731·2021-09-08 09:35
rem : web app適配的秘密武器

閱讀 1762·2019-08-30 13:03
2019年前端面試題-02

閱讀 2265·2019-08-30 11:06
摘自<css世界>(張鑫旭著)經(jīng)典案例---------持續(xù)更新中

閱讀 1934·2019-08-30 10:59
頁面性能優(yōu)化辦法有哪些？

閱讀 3278·2019-08-29 17:00
重學(xué)前端學(xué)習(xí)筆記（二十七）--JavaScript的詞法

閱讀 2370·2019-08-23 17:55

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

跨域

hello world

404 Not Found

404 Not Found

404 Not Found

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

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

相關(guān)文章

ajax跨域，這應(yīng)該是最全的解決方案了

大話javascript 5期：跨域

用本地運(yùn)行的demo快速入門跨域

用本地運(yùn)行的demo快速入門跨域

用本地運(yùn)行的demo快速入門跨域

javascript跨域

發(fā)表評(píng)論

0條評(píng)論

MageekChiu

男|高級(jí)講師

TA的文章

tensorflow卷積神經(jīng)網(wǎng)絡(luò)

SSM+JSP+MYSQL+H-UI 實(shí)現(xiàn)的校園點(diǎn)餐系統(tǒng)

每秒新增8個(gè)用戶，HarmonyOS 2.0用戶達(dá)到9000萬

rem : web app適配的秘密武器

2019年前端面試題-02

摘自<css世界>(張鑫旭著)經(jīng)典案例---------持續(xù)更新中

頁面性能優(yōu)化辦法有哪些？

重學(xué)前端學(xué)習(xí)筆記（二十七）--JavaScript的詞法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

跨域

hello world

404 Not Found

404 Not Found

404 Not Found

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

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！