6種跨域方式實現原理

1.JSONP

（1）jsonp原理
利用script標籤沒有跨域限制的漏洞，網頁可以得到從其他來源動態生產的JSON數，JSONP請求一定要對方的服務器做支持纔可以。
(2) jsonp和ajax對比
相同點：都是客戶端向服務端發送請求，從服務端獲取數據的方式。
不同點：ajax屬於同源策略，jsonp屬於非同源策略。
（3）jsonp的優缺點
優點：簡單兼容性好，可以解決主流瀏覽器的跨域數據訪問問題。
缺點：僅支持get方法，具有侷限性，不安全可能會遭受XSS攻擊
（4）jsonp的實現流程

聲明一個回調函數，其函數名當做參數值，傳遞給跨域請求數據的服務器，函數形參爲要獲取目標數據（服務器返回的data）
創建一個script標籤，把跨域的請求地址賦值給script標籤的src屬性，並且加入函數傳遞給服務器（如：http:xxx.xx.xx:8080?callback = show）
服務器接收到請求後需要進行特殊的處理，把傳遞進來的函數名和它需要給你的數據拼接成一個字符串，列如：傳遞進去的函數名是show,後端準備好的數據是show(‘這是你要的數據’).
最後服務器把準備好的數據通過HTTP協議返回給客戶端，客戶端再調用執行之前聲明的回調函數（show）,對返回的數據進行操作。
在開發中可能會遇到對個JSONP請求的回調函數名是相同的，這個時候需要自己封裝一個JSONP函數。

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 這個地址請求數據

（5）jQuery 中的jsonp請求
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、postMessage

postMessage是HTML5 XMLHttpRequest Level 2 中的api，且是爲數不多可以跨域操作的window屬性之一，它可用於解決一下方面的問題

頁面和其打開的新窗口的數據傳遞
多窗口之間消息傳遞
頁面與嵌套的ifream消息傳遞
-上面三個場景的跨域數據傳遞
postMessage()允許來自不同源的腳本採用異步方式進行有限的通信，可以實現跨文檔、多窗口、跨域消息傳遞。

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

message:將要發送到其他window的數據
targetOrigin:通過窗口的origin水泥杆來制定哪些窗口能接受到消息事件，其值可以是字符串‘*’標識無限制或是一個URL，在發送消息的時候，如果目標窗口的協議、主機地址或端口這三者的任意一個項不匹配targetOrigin提供的值，那麼消息就不會被髮送；只有三者完全匹配，消息纔會發送。

接下來我們看個例子： 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)
 }

3、websocket

websocket是html5的一個持久化的協議，它實現了瀏覽器與服務器的全雙工通信，同時也是跨域的一種解決方案。websocket和HTTP都是應用層協議，都基於TCP協議。但是websocket是一種雙向通信協議，在建立連接之後，websocket的server和client都能主動先對方發送或接受數據。
原生websocket API使用起來不方便，我們使用socket.io，它很好封裝了websocket接口，提供更簡單、靈活的接口，也對不支持websocket的瀏覽器提供向下兼容。
例子：本地文件socket.html向localhost:3000發生數據和接受數據

// socket.html
<script>
    let socket = new WebSocket('ws://localhost:3000');
    socket.onopen = function () {
      socket.send('我愛你');//向服務器發送數據
    }
    socket.onmessage = function (e) {
      console.log(e.data);//接收服務器返回的數據
    }
</script>

4、Node 中間件代理（兩次跨域）

實現原理：同源策略是瀏覽器需要遵循的標準，而如果是服務器向服務器請求就不需要遵循同源策略。
代理服務器步驟如下：

接口客戶端請求
將請求轉發給服務器
拿到服務器響應數據
將響應轉發給客戶端
列子：本地文件index.html文件，通過代理服務器http://localhost:3000向目標服務器http://localhost:4000請求數據。

// index.html(http://127.0.0.1:5500)
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
      $.ajax({
        url: 'http://localhost:3000',
        type: 'post',
        data: { name: 'xiamen', password: '123456' },
        contentType: 'application/json;charset=utf-8',
        success: function(result) {
          console.log(result) // {"title":"fontend","password":"123456"}
        },
        error: function(msg) {
          console.log(msg)
        }
      })
     </script>

node

// server1.js 代理服務器(http://localhost:3000)
const http = require('http')
// 第一步：接受客戶端請求
const server = http.createServer((request, response) => {
  // 代理服務器，直接和瀏覽器直接交互，需要設置CORS 的首部字段
  response.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': 'Content-Type'
  })
  // 第二步：將請求轉發給服務器
  const proxyRequest = http
    .request(
      {
        host: '127.0.0.1',
        port: 4000,
        url: '/',
        method: request.method,
        headers: request.headers
      },
      serverResponse => {
        // 第三步：收到服務器的響應
        var body = ''
        serverResponse.on('data', chunk => {
          body += chunk
        })
        serverResponse.on('end', () => {
          console.log('The data is ' + body)
          // 第四步：將響應結果轉發給瀏覽器
          response.end(body)
        })
      }
    )
    .end()
})
server.listen(3000, () => {
  console.log('The proxyServer is running at http://localhost:3000')
})

// server2.js(http://localhost:4000)
const http = require('http')
const data = { title: 'fontend', password: '123456' }
const server = http.createServer((request, response) => {
  if (request.url === '/') {
    response.end(JSON.stringify(data))
  }
})
server.listen(4000, () => {
  console.log('The server is running at http://localhost:4000')
})

上述代碼經過兩次跨域，值得注意的是瀏覽器向代理服務器發送請求，也遵循同源策略。

5、nginx 反向代理（最簡單的跨域方式）

實現原理類似於Node中間件代理，需要你搭建一箇中轉nginx服務器，用於轉發請求。
使用nginx反向代理實現跨域，是最簡單的跨域方式，只需要修改nginx的配置即可解決跨域問題，支持所有瀏覽器，支持session，不需要修改任何代碼，並且不會影響服務器性能。
實現思路：通過nginx配置一個代理服務器（域名與domain相同）做跳板機，反向代理訪問domain2接口，並且可以順便修改cookie中domain信息，方便當前域cookie寫入，實現跨域登錄。
先下載nginx，然後將nginx目錄下的nginx。conf修改如下：

// proxy服務器
server {
    listen       80;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie裏域名
        index  index.html index.htm;

        # 當用webpack-dev-server等中間件代理接口訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啓用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #當前端只跨域不帶cookie時，可爲*
        add_header Access-Control-Allow-Credentials true;
    }
}

6、CORS

CORS需要瀏覽器和後端同時支持，IE8 和8需要通過XDomainRequest來實現。
瀏覽器會自動進行CORS通信，實現CORS通信的關鍵是後端，只要後端實現了CORS，就實現跨域。
服務端設置 Access-Control-Allow-Origin 就可以開啓 CORS。該屬性表示哪些域名可以訪問資源，如果設置通配符則表示所有網站都可以訪問資源。

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

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

條件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向後臺請求時，屬於複雜請求。

總結

CORS支持所有類型的HTTP請求，是跨域HTTP請求的根本解決方案
JSONP只支持GET請求，JSONP的優勢在於支持老式瀏覽器，以及可以向不支持CORS的網站請求數據。
不管是node中間件代理還是nginx反向代理，主要通過同源策略對服務器不加限制
日常工作中，用得比較多的跨域方案是CORS和nginx反向代理
本文是參考https://github.com/ljianshu/Blog/issues/55，還有其他的幾種跨域方法，在鏈接中有的，有想看的請點擊鏈接進去看。

6種跨域方式實現原理

1.JSONP

2、postMessage

3、websocket

4、Node 中間件代理（兩次跨域）

5、nginx 反向代理（最簡單的跨域方式）

6、CORS

總結

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

React 中的核心

什麼是同源策略及限制

Vue生命週期，Vue中在哪個生命週期階段調用異步請求最佳

6種跨域方式實現原理

雙向數據綁定的原理

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結