深入跨域問題(1) - 初識(shí) CORS 跨域資源共享；
深入跨域問題(3) - 利用 JSONP 解決跨域（本篇）
什么是跨域，在這篇文章內(nèi)部就不再講述了止状，在第一篇文章里面查看遂鹊，本文主要著重于實(shí)現(xiàn) JSONP 的原理 鸣皂。
script 標(biāo)簽：
根據(jù)同源策略的限制，在 端口钧椰，域名，協(xié)議 這三者 一個(gè)或者多個(gè)不同的情況下 符欠，就會(huì)出現(xiàn)跨域限制嫡霞。
但是，<script> 標(biāo)簽訪問時(shí)希柿，可以跨越這些同源策略限制诊沪，但只能使用 GET 方法：
簡(jiǎn)單例子：
JSONP 的運(yùn)用十分廣泛养筒，各大網(wǎng)站都有使用：豆瓣，QQ音樂等端姚；下面是 QQ音樂的 簡(jiǎn)單 JSONP 接口：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax測(cè)試</title>
</head>
<body>
<script>
function jsonCallback(data) {
console.log(data);
}
</script>
<script src="https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg"></script>
</body>
</html>
直接打開此鏈接：
[圖片上傳失敗...(image-7890ae-1526541599658)]
你可以看到晕粪，上述返回信息是，調(diào)用 jsonCallback() 函數(shù)渐裸，并傳遞 一個(gè)JSON 字符串巫湘。
打開控制臺(tái)，你就可以看到：
上述實(shí)現(xiàn)原理：
- 利用
script標(biāo)簽昏鹃，規(guī)避跨域尚氛，<script src="url">。 - 在客戶端聲明一個(gè)函數(shù)洞渤，
function jsonCallback() {}阅嘶。 - 在服務(wù)端根據(jù)客戶端傳來的信息，查找數(shù)據(jù)庫您宪，然后返回?cái)?shù)據(jù)并調(diào)用
jsonCallback()函數(shù)奈懒。
其中，感覺上最難的一點(diǎn)是宪巨，如何實(shí)現(xiàn)返回?cái)?shù)據(jù)磷杏，并 調(diào)用客戶端函數(shù) ？事實(shí)上很簡(jiǎn)單捏卓，請(qǐng)往下看极祸。
基本實(shí)現(xiàn)
在這個(gè)部分里，我們將基本實(shí)現(xiàn)這個(gè)流程怠晴。
客戶端代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax測(cè)試</title>
</head>
<body>
<script>
function jsonpCallback(data) {
console.log(data);
}
</script>
<script src="http://localhost:3000"></script>
</body>
</html>
服務(wù)器端代碼：
const http = require('http');
var data = { name: 'BruceLee', password: '123456' };
const server = http.createServer((request, response) => {
if (request.url === '/') {
response.writeHead(200, {
'Content-Type': 'application/json;charset=utf-8'
});
response.end( "jsonpCallback(" + JSON.stringify(data) + ")" );
}
});
server.listen(3000, () => {
console.log('The server is running at http://localhost:3000');
});
在這里遥金，我們最后直接返回一個(gè) 字符串 給客戶端，<script> 標(biāo)簽將直接運(yùn)行 字符串 里面的內(nèi)容 Ｋ馓铩８逍怠！
這就是冲粤，基本的前后端美莫，使用 JSONP 解決跨域問題的方案 。
JSONP 與 CORS 的對(duì)比
JSONP 是很早很成熟的解決方案梯捕，但是厢呵，只能進(jìn)行 GET 請(qǐng)求，無法實(shí)現(xiàn)上傳數(shù)據(jù)等操作傀顾。
反觀：CORS 雖然分 預(yù)請(qǐng)求 和 非預(yù)請(qǐng)求 襟铭，但是，無疑支持的功能是非常強(qiáng)大的 ！：赐劣！
參考與感謝
- https://www.cnblogs.com/giggle/p/5496596.html
- https://blog.csdn.net/u011897301/article/details/52679486
感謝上述兩篇鏈接的作者，他們讓我明白了 JSONP 的實(shí)質(zhì) 入撒。
