跨域篇

時間 2019-11-18

原文原文鏈接

跨域解決方案有什麼？分享給愛學習的你！

跨域解決方案html

1.jsonp前端

1) JSONP原理ajax

利用 <script> 標籤沒有跨域限制的漏洞，網頁能夠獲得從其餘來源動態產生的 JSON 數據。JSONP請求必定須要對方的服務器作支持才能夠。express

2) JSONP和AJAX對比json

JSONP和AJAX相同，都是客戶端向服務器端發送請求，從服務器端獲取數據的方式。但AJAX屬於同源策略，JSONP屬於非同源策略（跨域請求）後端

3) JSONP優缺點跨域

JSONP優勢是簡單兼容性好，可用於解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方法具備侷限性,不安全可能會遭受XSS攻擊。瀏覽器

4) JSONP的實現流程緩存

聲明一個回調函數，其函數名(如show)當作參數值，要傳遞給跨域請求數據的服務器，函數形參爲要獲取目標數據(服務器返回的data)。安全

建立一個<script>標籤，把那個跨域的API數據接口地址，賦值給script的src,還要在這個地址中向服務器傳遞該函數名（能夠經過問號傳參:?callback=show）。

服務器接收到請求後，須要進行特殊的處理：把傳遞進來的函數名和它須要給你的數據拼接成一個字符串,例如：傳遞進去的函數名是show，它準備好的數據是show('我不愛你')。

最後服務器把準備的數據經過HTTP協議返回給客戶端，客戶端再調用執行以前聲明的回調函數（show），對返回的數據進行操做。

在開發中可能會遇到多個 JSONP 請求的回調函數名是相同的，這時候就須要本身封裝一個 JSONP函數。

// index.html
function jsonp({ url, params, callback }) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script')
    window[callback] = function(data) {
      resolve(data)
      document.body.removeChild(script)
    }
    params = { ...params, callback } // wd=b&callback=show
    let arrs = []
    for (let key in params) {
      arrs.push(`${key}=${params[key]}`)
    }
    script.src = `${url}?${arrs.join('&')}`
    document.body.appendChild(script)
  })
}
jsonp({
  url: 'http://localhost:3000/say',
  params: { wd: 'Iloveyou' },
  callback: 'show'
}).then(data => {
  console.log(data)
})

上面這段代碼至關於向

http://localhost:3000/say?wd=Iloveyou&callback=show這個地址請求數據，而後後臺返回show('我不愛你')，最後會運行show()這個函數，打印出'我不愛你'

// server.js
let express = require('express')
let app = express()
app.get('/say', function(req, res) {
  let { wd, callback } = req.query
  console.log(wd) // Iloveyou
  console.log(callback) // show
  res.end(`${callback}('我不愛你')`)
})
app.listen(3000)

5) jQuery的jsonp形式

JSONP都是GET和異步請求的，不存在其餘的請求方式和同步請求，且jQuery默認就會給JSONP的請求清除緩存。

$.ajax({
url:"http://crossdomain.com/jsonServerResponse",
dataType:"jsonp",
type:"get",//能夠省略
jsonpCallback:"show",//->自定義傳遞給服務器的函數名，而不是使用jQuery自動生成的，可省略
jsonp:"callback",//->把傳遞函數名的那個形參callback，可省略
success:function (data){
console.log(data);}
});

2.cors

CORS 須要瀏覽器和後端同時支持。IE 8 和 9 須要經過 XDomainRequest 來實現。

瀏覽器會自動進行 CORS 通訊，實現 CORS 通訊的關鍵是後端。只要後端實現了 CORS，就實現了跨域。

服務端設置 Access-Control-Allow-Origin 就能夠開啓 CORS。該屬性表示哪些域名能夠訪問資源，若是設置通配符則表示全部網站均可以訪問資源。

雖然設置 CORS 和前端沒什麼關係，可是經過這種方式解決跨域問題的話，會在發送請求時出現兩種狀況，分別爲簡單請求和複雜請求。

1) 簡單請求

只要同時知足如下兩大條件，就屬於簡單請求

條件1：使用下列方法之一：

GET
HEAD
POST

條件2：Content-Type 的值僅限於下列三者之一：

text/plain
multipart/form-data
application/x-www-form-urlencoded

請求中的任意 XMLHttpRequestUpload 對象均沒有註冊任何事件監聽器； XMLHttpRequestUpload 對象能夠使用 XMLHttpRequest.upload 屬性訪問。

2) 複雜請求

不符合以上條件的請求就確定是複雜請求了。

複雜請求的CORS請求，會在正式通訊以前，增長一次HTTP查詢請求，稱爲"預檢"請求,該請求是 option 方法的，經過該請求來知道服務端是否容許跨域請求。

咱們用PUT向後臺請求時，屬於複雜請求，後臺需作以下配置：

// 容許哪一個方法訪問我
res.setHeader('Access-Control-Allow-Methods', 'PUT')
// 預檢的存活時間
res.setHeader('Access-Control-Max-Age', 6)
// OPTIONS請求不作任何處理
if (req.method === 'OPTIONS') {
  res.end() 
}
// 定義後臺返回的內容
app.put('/getData', function(req, res) {
  console.log(req.headers)
  res.end('我不愛你')
})

接下來咱們看下一個完整複雜請求的例子，而且介紹下CORS請求相關的字段

// index.html
let xhr = new XMLHttpRequest()
document.cookie = 'name=xiamen' // cookie不能跨域
xhr.withCredentials = true // 前端設置是否帶cookie
xhr.open('PUT', 'http://localhost:4000/getData', true)
xhr.setRequestHeader('name', 'xiamen')
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(xhr.response)
      //獲得響應頭，後臺需設置Access-Control-Expose-Headers
      console.log(xhr.getResponseHeader('name'))
    }
  }
}
xhr.send()

//server1.js
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(3000);

//server2.js
let express = require('express')
let app = express()
let whitList = ['http://localhost:3000'] //設置白名單
app.use(function(req, res, next) {
  let origin = req.headers.origin
  if (whitList.includes(origin)) {
    // 設置哪一個源能夠訪問我
    res.setHeader('Access-Control-Allow-Origin', origin)
    // 容許攜帶哪一個頭訪問我
    res.setHeader('Access-Control-Allow-Headers', 'name')
    // 容許哪一個方法訪問我
    res.setHeader('Access-Control-Allow-Methods', 'PUT')
    // 容許攜帶cookie
    res.setHeader('Access-Control-Allow-Credentials', true)
    // 預檢的存活時間
    res.setHeader('Access-Control-Max-Age', 6)
    // 容許返回的頭
    res.setHeader('Access-Control-Expose-Headers', 'name')
    if (req.method === 'OPTIONS') {
      res.end() // OPTIONS請求不作任何處理
    }
  }
  next()
})
app.put('/getData', function(req, res) {
  console.log(req.headers)
  res.setHeader('name', 'jw') //返回一個響應頭，後臺需設置
  res.end('我不愛你')
})
app.get('/getData', function(req, res) {
  console.log(req.headers)
  res.end('我不愛你')
})
app.use(express.static(__dirname))
app.listen(4000)

上述代碼由http://localhost:3000/index.html向http://localhost:4000/跨域請求，正如咱們上面所說的，後端是實現 CORS 通訊的關鍵。

3.postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是爲數很少能夠跨域操做的window屬性之一，它可用於解決如下方面的問題：

頁面和其打開的新窗口的數據傳遞
多窗口之間消息傳遞
頁面與嵌套的iframe消息傳遞
上面三個場景的跨域數據傳遞

postMessage()方法容許來自不一樣源的腳本採用異步方式進行有限的通訊，能夠實現跨文本檔、多窗口、跨域消息傳遞。

otherWindow.postMessage(message, targetOrigin, [transfer]);

message: 將要發送到其餘 window的數據。
targetOrigin:經過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值能夠是字符串"*"（表示無限制）或者一個URI。在發送消息的時候，若是目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那麼消息就不會被髮送；只有三者徹底匹配，消息纔會被髮送。
transfer(可選)：是一串和message 同時傳遞的 Transferable 對象. 這些對象的全部權將被轉移給消息的接收方，而發送一方將再也不保有全部權。

接下來咱們看個例子：

http://localhost:3000/a.html頁面向http://localhost:4000/b.html傳遞「我愛你」,而後後者傳回"我不愛你"。

// a.html
  <iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe> //等它加載完觸發一個事件
  //內嵌在http://localhost:3000/a.html
    <script>
      function load() {
        let frame = document.getElementById('frame')
        frame.contentWindow.postMessage('我愛你', 'http://localhost:4000') //發送數據
        window.onmessage = function(e) { //接受返回數據
          console.log(e.data) //我不愛你
        }
      }
    </script>

// b.html
  window.onmessage = function(e) {
    console.log(e.data) //我愛你
    e.source.postMessage('我不愛你', e.origin) }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。