題目
- 什么是跨域？
- JSONP
- CORS(服務端支持)
知識點
- 同源策略
- 跨域解決方案
同源策略
- ajax請求的時候，瀏覽器基于安全的需求要求當前網頁和server端必須同源
- 同源:協議，域名，埠，三者必須一致，前端頁面請求：http://a.com;請求API:https://b.com/apix/xx , 這兩個url不同源，產生跨域問題，
為什么會有JSONP? 因為在HTML標簽中有一些標簽和屬性不受同源策略的限制，其中script就是，
<img src="https://www.cnblogs.com/rookie123/p/跨域的圖片地址"> 可以用于統計打點，可以使用第三方統計服務？？？
<link href="https://www.cnblogs.com/rookie123/p/跨域的CSS地址"> 可以使用CDN,一般外域
<script src="https://www.cnblogs.com/rookie123/p/跨域的js地址"></script> 實作JSONP????具體實作
總而言之，這幾個都可以不收瀏覽器同源策略的限制
- 所有的跨域，都必須經過server端的允許和配合
- 未經過server端的配合就實作跨域，說明瀏覽器有漏洞，危險！
JSONP的具體實作
前導知識
-
訪問 http://immoc.com ,服務端一定回傳html檔案嗎？答案是否定的，
-
服務器可以任意動態拼接資料回傳，只要符合型別格式即可，
-
同理于
-
<script scr="http://imooc.com/getData.js"></script>
所以：就有了JSONP這種跨域的實作方式:就是通過前端動態的創建script標簽，借用src屬性來發起跨域請求，
- script可以跨域
- 服務端可以拼接任務資料回傳
- 所以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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/243510.html
標籤：JavaScript
上一篇：js 基本資料型別