跨域和解決方案: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