同源策略與跨域

同源策略(Same origin Policy)

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

本域指的是？

如：

不同源的例子：

需要注意的是: 對(duì)于當(dāng)前頁(yè)面來(lái)說(shuō)頁(yè)面存放的 JS 文件的域不重要，重要的是加載該 JS 頁(yè)面所在什么域

注：請(qǐng)求是發(fā)送成功也接收成功了的，但是被瀏覽器給阻止了，是瀏覽器的機(jī)制

跨域的幾種方法

JSONP

HTML 中 script 標(biāo)簽可以加載其他域下的js，比如我們經(jīng)常引入一個(gè)其他域下線上cdn的jQuery。那如何利用這個(gè)特性實(shí)現(xiàn)從其他域下獲取數(shù)據(jù)呢？
可以先這樣試試：

<script src="http://api.jirengu.com/weather.php"></script>

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

這樣試試：
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

這個(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 來(lái)執(zhí)行，這實(shí)際上就是調(diào)用showData這個(gè)函數(shù)，同時(shí)參數(shù)是 {“city”: “hangzhou”, “weather”: “晴天”}。 用戶只需要在加載提前在頁(yè)面定義好showData這個(gè)全局函數(shù)，在函數(shù)內(nèi)部處理參數(shù)即可。

<script>
function showData(ret){
console.log(ret);
}
</script>
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

這就是 JSONP(JSON with padding)，總結(jié)一下：
JSONP是通過(guò) script 標(biāo)簽加載數(shù)據(jù)的方式去獲取數(shù)據(jù)當(dāng)做 JS 代碼來(lái)執(zhí)行 提前在頁(yè)面上聲明一個(gè)函數(shù)，函數(shù)名通過(guò)接口傳參的方式傳給后臺(tái)，后臺(tái)解析到函數(shù)名后在原始數(shù)據(jù)上「包裹」這個(gè)函數(shù)名，發(fā)送給前端。換句話說(shuō)，JSONP 需要對(duì)應(yīng)接口的后端的配合才能實(shí)現(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日前瞻：中國(guó)沖擊4金 博爾特再戰(zhàn)200米羽球",
        "正直播柴飚/洪煒出戰(zhàn) 男雙力爭(zhēng)會(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('<h1>404 Not Found</h1>')
        }else{
          res.end(data)
        }
      }) 
  }
}).listen(8080)

index.html

<!DOCTYPE html>
<html>
<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>

<script>

  $('.show').addEventListener('click', function(){
    var script = document.createElement('script');
    script.src = 'http://127.0.0.1:8080/getNews?callback=appendHtml';
    document.head.appendChild(script);
    document.head.removeChild(script);
  })

  function appendHtml(news){
    var html = '';
    for( var i=0; i<news.length; i++){
      html += '<li>' + news[i] + '</li>';
    }
    console.log(html);
    $('.news').innerHTML = html;
  }

  function $(id){
    return document.querySelector(id);
  }
</script>

</html>

CORS

CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing），是一種 ajax 跨域請(qǐng)求資源的方式，支持現(xiàn)代瀏覽器，IE支持10以上。 實(shí)現(xiàn)方式很簡(jiǎ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; 瀏覽器判斷該相應(yīng)頭中是否包含 Origin 的值，如果有則瀏覽器會(huì)處理響應(yīng)，我們就可以拿到響應(yīng)數(shù)據(jù)，如果不包含瀏覽器直接駁回，這時(shí)我們無(wú)法拿到響應(yīng)數(shù)據(jù)。所以 CORS 的表象是讓你覺(jué)得它與同源的 ajax 請(qǐng)求沒(méi)啥區(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日前瞻：中國(guó)沖擊4金 博爾特再戰(zhàn)200米羽球",
        "正直播柴飚/洪煒出戰(zhàn) 男雙力爭(zhēng)會(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('<h1>404 Not Found</h1>')
        }else{
          res.end(data)
        }
      }) 
  }
}).listen(8080)

index.html

<!DOCTYPE html>
<html>
<body>
  <div class="container">
    <ul class="news">

    </ul>
    <button class="show">show news</button>
  </div>

<script>

  $('.show').addEventListener('click', function(){
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://127.0.0.1:8080/getNews', true)
    xhr.send()
    xhr.onload = function(){
      appendHtml(JSON.parse(xhr.responseText))
    }
  })

  function appendHtml(news){
    var html = ''
    for( var i=0; i<news.length; i++){
      html += '<li>' + news[i] + '</li>'
    }
    $('.news').innerHTML = html
  }

  function $(selector){
    return document.querySelector(selector)
  }
</script>

</html>

降域

clipboard.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、概述 1.1 含義 1995年，同源政策由 Netscape 公司引入瀏覽器。目前，所有瀏覽器都實(shí)行這個(gè)政策。...
    會(huì)飛的賊er閱讀 497評(píng)論 0贊 2
  • 同源策略 首先解釋：同源策略同源策略是瀏覽器最核心也最基本的安全功能，這個(gè)策略可以阻止一個(gè)頁(yè)面上的惡意腳本通過(guò)頁(yè)面...
    cicistream閱讀 417評(píng)論 0贊 0
  • 跨域?qū)τ谇岸藖?lái)講是個(gè)耳熟的字眼，在日常工作和面試中經(jīng)常出現(xiàn)。本文介紹了同源策略、CORS跨域資源共享、實(shí)際開(kāi)發(fā)中如...
    柚吖柚柚子閱讀 717評(píng)論 0贊 1
  • 一、瀏覽器發(fā)請(qǐng)求的幾種方式： 1、form表單，優(yōu)點(diǎn)是可以發(fā)送多種形式的請(qǐng)求，缺點(diǎn)是會(huì)刷新或重開(kāi)頁(yè)面；2、a，只能...
    Zoey_h閱讀 417評(píng)論 0贊 0
  • 發(fā)現(xiàn)問(wèn)題，記錄問(wèn)題，對(duì)問(wèn)題分類，分析解決問(wèn)題，重新提升。自己還停留在發(fā)現(xiàn)問(wèn)題的階段。 需要不斷的培養(yǎng)自己對(duì)細(xì)節(jié)的把...
    一葉秋濃閱讀 139評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容