跨域和解決方案:JSONP繞過實現,CORS繞過介紹

題目

1. 什麼是跨域？
2. JSONP
3. CORS(服務端支持)

知識點

• 同源策略
• 跨域解決方案

同源策略

1. ajax請求的時候，瀏覽器基於安全的需求要求當前網頁和server端必須同源
2. 同源:協議，域名，端口，三者必須一致。前端頁面請求：http://a.com;請求API:https://b.com/apix/xx , 這兩個url不一樣源，產生跨域問題。

爲何會有JSONP? 由於在HTML標籤中有一些標籤和屬性不受同源策略的限制。其中script就是。

<img src="跨域的圖片地址"> 能夠用於統計打點，可使用第三方統計服務？？？
<link href="跨域的CSS地址"> 可使用CDN,通常外域
<script src="跨域的js地址"></script> 實現JSONP????具體實現

總而言之，這幾個均可以不收瀏覽器同源策略的限制

• 全部的跨域，都必須通過server端的容許和配合
• 未通過server端的配合就實現跨域，說明瀏覽器有漏洞，危險！

JSONP的具體實現

前導知識

• 訪問 http://immoc.com ,服務端必定返回html文件嗎？答案是否認的。

• 服務器能夠任意動態拼接數據返回，只要符合類型格式便可。

• 同理於

• <script scr="http://imooc.com/getData.js"></script>

因此：就有了JSONP這種跨域的實現方式:就是經過前端動態的建立script標籤，借用src屬性來發起跨域請求。

1. script能夠跨域
2. 服務端能夠拼接任務數據返回
3. 因此script就能夠通過服務端配合就能夠得到跨域數據

JSONP實現

前端頁面demo:

//前端頁面定義好函數
<script>
  window.callback = function(x) {
    console.log(x);
  }
  let script = document.createElement('script');
  script.src = "http://localhost/getData.js";
	btn.addEventListener('click', function() {
  	document.body.appendChild(script);
  });
</script>

服務端返回數據:

response.write(`callback({name:"Bob"})`);

而後瀏覽器接收到callback({name:"Bob"}); ,根據javascript解析。這裏就是直接輸出:{name:"Bob"}

CORS-服務端設置http-header來實現跨域---純服務端的操做！

response.setHeader('Access-Control-Allow-Origin','url');//url填寫容許訪問的地址
response.setHeader('Access-Control-Allow-Header','X-Requested-With');
response.setheader('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');

//接受跨域的cookie
response.setHeader("Access-Control-Allow-Credentails","true");

知識點的總結：

• 同源策略跨域

• JSONP

• CORS