如何解決跨域

同源策略

爲了防止跨域請求僞造攻擊，瀏覽器用同源策略的機制來保證安全。同源策略必須是：協議相同，域名相同，端口相同

JSONP

因爲script腳本不受跨域限制，咱們能夠運用這個特性來請求數據， 咱們能夠發送一個帶callback的請求到服務端，如www.abc.com/api?callback=func, 而服務器根據你的callback來返回json數據。這個例子會返回相似

func({
    data: 'test'
})
複製代碼

因爲你的func函數已經在本地定義好了, 上述返回的script腳本會直接運行你本地的代碼，

function func(data) {
    console.log(data)
}
複製代碼

經過這個原理咱們能夠動態添加script來調用， 一些庫包括jQuery已經包裝好了，咱們能夠直接使用

Hash

// 利用hash，場景是當前頁面 A 經過iframe或frame嵌入了跨域的頁面 B
      // 在A中僞代碼以下：
      var B = document.getElementsByTagName('iframe');
      B.src = B.src + '#' + 'data';
      // 在B中的僞代碼以下
      window.onhashchange = function () {
          var data = window.location.hash;
      };
複製代碼

CORS 跨域訪問

瀏覽器會檢查服務器的響應頭域，進而判斷是否容許當前站點訪問。 一些常見的響應頭域有

Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Expose-Headers
Access-Control-Max-Age
複製代碼

經過代理服務器請求

能夠經過本身的服務器請求數據， 或者用代理服務器

Websocket

var ws = new WebSocket('wss://echo.websocket.org');

      ws.onopen = function (evt) {
          console.log('Connection open ...');
          ws.send('Hello WebSockets!');
      };

      ws.onmessage = function (evt) {
          console.log('Received Message: ', evt.data);
          ws.close();
      };

      ws.onclose = function (evt) {
          console.log('Connection closed.');
      };
複製代碼

postMessage

//a.com/index.html
<iframe src="b.com/index.html" id="ifr">
</iframe>
<script> window.onload = function(){ var iframe = document.getElementById('ifr'); var targetOrigin = 'http://b.com'; // 若寫成'http://b.com/c/proxy.html'效果同樣 // 若寫成'http://c.com'就不會執行postMessage了 iframe.contentWindow.postMessage('data to send',targetOrigin); } </script>



// b.com/index.html
<script type="text/javascript"> window.addEventListener('message',function(event){ // 經過origin屬性判斷消息來源地址 if(event.origin == 'http://a.com'){ console.log(event.data); console.log(event.source); } },false); </script>
複製代碼

document.domain

經過修改document.domain

容許跨域的標籤

img, link, script