同源策略（Same Origin Policy）

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

同協(xié)議：如都是http或https
同域名：如http://jirengu.com/a與http://jirengu.com/b
同端口：如都是80端口

需要注意的是：對(duì)于當(dāng)前頁面來說頁面保存的JS文件的域不重要，重要的是加載該JS頁面所在的域。

跨域的實(shí)現(xiàn)方法

一、JSONP

JSONP是通過 script 標(biāo)簽加載數(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)。

sever.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) 男雙力爭(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>

打開終端，輸入node sever.js，瀏覽器打開 http://localhost:8080/index.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í)我們無法拿到響應(yīng)數(shù)據(jù)。所以 CORS 的表象是讓你覺得它與同源的 ajax 請(qǐng)求沒啥區(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) 男雙力爭(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>

三、降域

域名為http://b.wuxiaozhou.com/b的網(wǎng)頁以iframe的形式嵌在域名為http://a.wuxiaozhou.com/a的網(wǎng)頁中，它們來自不同的域名，正常情況下不能進(jìn)行跨域訪問。
但是當(dāng)我們?yōu)閮蓚€(gè)頁面都加上這樣一句代碼document.domain = 'wuxiaozhou.com';，這時(shí)候這兩個(gè)頁面就位于同一個(gè)域名下面了，就可以在頁面a中對(duì)頁面b進(jìn)行操作了，兩個(gè)頁面可以互相訪問。
需要注意的是兩個(gè)域名要有相同的部分才可以使用降域，比如這個(gè)例子中的就都含有wuxiaozhou.com這一部分。

a.html

<html>
<div class="ct">
  <h1>使用降域?qū)崿F(xiàn)跨域</h1>
  <div class="main">
    <input type="text" placeholder="http://a.wuxiaozhou.com/a.html">
  </div>

  <iframe src="http://b.wuxiaozhou.com/b.html" frameborder="0" ></iframe>

</div>


<script>
//URL: http://a.wuxiaozhou.com/a.html

document.querySelector('.main input').addEventListener('input', function(){
  console.log(this.value);
  window.frames[0].document.querySelector('input').value = this.value;
})


document.domain = "wuxiaozhou.com"

</script>
</html>

b.html

<html>
<style>
    html,body{
        margin: 0;
    }
    input{
        margin: 20px;
        width: 200px;
    }
</style>

    <input id="input" type="text"  placeholder="http://b.wuxiaozhou.com/b.html">
<script>

// URL: http://b.wuxiaozhou.com/b.html

document.querySelector('#input').addEventListener('input', function(){
    window.parent.document.querySelector('input').value = this.value;
})

document.domain = 'wuxiaozhou.com';

</script>
</html>

四、postMessage

postMessage()方法允許來自不同源的腳本采用異步方式進(jìn)行有限的通信，可以實(shí)現(xiàn)跨文本檔、多窗口、跨域消息傳遞。
postMessage(data,origin)方法接受兩個(gè)參數(shù)：

data：要傳遞的數(shù)據(jù)，html5規(guī)范中提到該參數(shù)可以是JavaScript的任意基本類型或可復(fù)制的對(duì)象，然而并不是所有瀏覽器都做到了這點(diǎn)兒，部分瀏覽器只能處理字符串參數(shù)，所以我們?cè)趥鬟f參數(shù)的時(shí)候需要使用JSON.stringify()方法對(duì)對(duì)象參數(shù)序列化，在低版本IE中引用json2.js可以實(shí)現(xiàn)類似效果。而接收方要開啟事件監(jiān)聽，監(jiān)聽message事件。
origin：字符串參數(shù)，指明目標(biāo)窗口的源，協(xié)議+主機(jī)+端口號(hào)[+URL]，URL會(huì)被忽略，所以可以不寫，這個(gè)參數(shù)是為了安全考慮，postMessage()方法只會(huì)將message傳遞給指定窗口，當(dāng)然如果愿意也可以建參數(shù)設(shè)置為"*"，這樣可以傳遞給任意窗口，如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。

五、服務(wù)端中轉(zhuǎn)跨域

JSONP、CORS 這兩種跨域請(qǐng)求方式都需要對(duì)方服務(wù)器支持。假設(shè)對(duì)方服務(wù)器不提供支持怎么辦？還有一個(gè)必殺技，自己搭建 server 中請(qǐng)求中轉(zhuǎn)。
假設(shè) 我們的頁面為 https://jirengu.github.io/weather/weather.html，需要向 https://weather.com/now 這個(gè)接口發(fā)送請(qǐng)求獲取數(shù)據(jù)，但此接口不支持JSONP 和 CORS跨域。
我們可以這樣做：

搭建服務(wù)器，創(chuàng)建接口，如 https://api.jirengu.com/weather
設(shè)置這個(gè)接口允許 CORS 跨域
我們的頁面向自己的這個(gè)接口發(fā)請(qǐng)求
接口收到請(qǐng)求后，在服務(wù)器端向https://weather.com/now這個(gè)接口要數(shù)據(jù)（在服務(wù)端不存在同源策略限制），拿到數(shù)據(jù)后，返回給前端頁面

六、withCredentials

XMLHttpRequest.withCredentials表示跨域請(qǐng)求是否提供憑據(jù)信息(cookie、HTTP認(rèn)證及客戶端SSL證明等)，也可以簡(jiǎn)單的理解為，當(dāng)前請(qǐng)求為跨域類型時(shí)是否在請(qǐng)求中協(xié)帶cookie。
假設(shè) 我們的頁面為 https://jirengu.github.io/notebook/index.html，需要向 https://note-server.jirengu.com.com/isLogin （此接口設(shè)置了 CORS 跨域支持）這個(gè)接口發(fā)發(fā)送請(qǐng)求獲取用戶是否登錄的信息。
在發(fā)送請(qǐng)求的時(shí)候，需要設(shè)置 withCredentials = true，那么請(qǐng)求的時(shí)候會(huì)帶上 cookie 信息。否則請(qǐng)求不帶上 cookie，后端接口會(huì)認(rèn)為一直處于未登錄狀態(tài)。

var xhr = new XMLHttpRequest()
xhr.withCredentials = true
xhr.open('GET', 'https://note-server.jirengu.com.com/isLogin', true)
xhr.onload = function() {
  console.log('withCredentials: ', xhr.withCredentials)
}
xhr.send()

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

同源策略&跨域

同源策略&跨域

同源策略（Same Origin Policy）

跨域的實(shí)現(xiàn)方法

一、JSONP

二、CORS

三、降域

四、postMessage

五、服務(wù)端中轉(zhuǎn)跨域

六、withCredentials

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

同源策略&跨域

同源策略（Same Origin Policy）

跨域的實(shí)現(xiàn)方法

一、JSONP

二、CORS

三、降域

四、postMessage

五、服務(wù)端中轉(zhuǎn)跨域

六、withCredentials

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、JSONP

二、CORS

三、降域

四、postMessage

五、服務(wù)端中轉(zhuǎn)跨域

六、withCredentials