【前端週刊】20190812 - jsonp跨域實現原理詳解

時間 2019-11-06

原文原文鏈接

jsonp跨域實現原理詳解

實現跨域的方式有：html

jsonp
cors
postMessage
document.domain （一級域名和二級域名通訊）
window.name
location.hash
http-prox (webpack)
nginx
websocket

下面主要說一下jsonp跨域的實現方式：webpack

JSONP是經過在文檔中嵌入一個script標籤來從另外一個域中返回數據，例如在頁面中添加一個以下的script標記：

<script src="http://blog.ambergarden.com/someData?callback=some_func"/>
複製代碼

該script標記會向http://blog.ambergarden.com/someData發送一個GET請求。在數據返回到客戶端後，some_func()函數將會被調用。固然，這種方法擁有一個顯著的缺點，那就是 只支持GET 操做。nginx

拿百度搜索舉例說明：web

<!DOCTYPE html>
<html>
<head>
	<title>json跨域</title>
</head>
<body>
	<div>json跨域</div>
	<script>
	    function show(data) {
	        console.log(data)
	    }
	</script>
	<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aiqiyi&cb=show"></script>
</body>
</html>
複製代碼

sp0.baidu.com/5a1Fazu8AA5…json

該接口返回數據格式以下：跨域

能夠看到， wd 的參數就是咱們搜索的 關鍵詞 ， cb 是 回調函數

下面咱們對上述實現方式進行封裝bash

<!DOCTYPE html>
<html>
<head>
	<title>jsonp</title>
</head>
<body>
	<div>jsonp</div>
<script>
    function jsonp(obj) {
    	let {url, params, cb } = obj;
    	return new Promise((resolve, reject) => {
    		let script = document.createElement('script');
    		params = {...params, cb}
    		let arrs = [];
    		for (let key in params) {
    			arrs.push(`${key}=${params[key]}`)
    		}
    		
    		script.src = `${url}?${arrs.join('&')}`;
    		document.body.appendChild(script);
    		window[cb] = function (data) {
    			resolve(data);
    			document.body.removeChild(script);
    		}
    	})
    }
    jsonp({
    	url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
    	params: {
    		wd: 'b'
    	},
    	cb: 'show'
    }).then(data =>{
    	console.log(data, '444');
    })
</script>
</body>
</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。