本文實(shí)踐了三種方法去解決從a頁面通過跨域ajax請(qǐng)求b頁面的數(shù)據(jù)椭符，三種方法分別：
- jsonp
- 服務(wù)器代理
- 在服務(wù)器端設(shè)置cors
1. 跨域 cross-domain
什么是跨域跟伏？ 顧名思義可以理解為：超越了劃定的區(qū)域。
具體來說秧了，當(dāng)你在一個(gè)頁面中去請(qǐng)求另一個(gè)頁面的數(shù)據(jù)時(shí)跨扮，這個(gè)請(qǐng)求就可能“越界”了。
如：在A頁面中的验毡，發(fā)動(dòng)ajax中去請(qǐng)求B頁面的數(shù)據(jù)衡创。如果A頁面和B頁面不是同源的，則說明這個(gè)請(qǐng)求是跨域的晶通。
1.1 同源與不同源
所謂同源是指:域名钧汹，協(xié)議，端口均相同录择。
1.1.1 同源的：
A頁面：http://www.aaa.com/index.html
B頁面: http://www.aaa.com/server.php
從A頁面請(qǐng)求B頁面拔莱，不存在跨域
1.1.2 如下不是同源的：域名不同
A頁面: http://www.aaa.com/index.html
B頁面: http://www.bbb.com/server.php
如下不是同源的：端口號(hào)不同
A頁面: http://www.aaa.com:8080/index.html 請(qǐng)求 B頁面: http://www.aaa.com:8081/server.php
如下不是同源的：協(xié)議不同
A頁面: http://www.aaa.com/index.html
請(qǐng)求
B頁面 https://www.aaa.com/server.php
關(guān)于同源問題，可以在這里研讀阮老師的博客隘竭。
跨域的錯(cuò)誤提示
如果你的請(qǐng)求是跨域時(shí)塘秦，你可能會(huì)看到如下類型的錯(cuò)誤：
注意關(guān)鍵字：Access-control-allow-origin
基本的代碼示例
下面的代碼運(yùn)行需要 node 和 express 支持。
相關(guān)文件目錄 如下：
port3000.js
代碼如下：
//port3000.js 文件
const express = require("express");
const https = require("https");
const path = require("path");
const app = express();
app.use(express.static(path.join(__dirname, "/public")));
app.get("/",(req,res)=>{
res.sendFile(__dirname +"/3000.html"); //直接引入3000.html文件
});
app.listen(3000,()=>{
console.log("http server is listening in port 3000...")
})
上面的代碼在node環(huán)境下運(yùn)行之后动看，就會(huì)開啟express服務(wù)尊剔，監(jiān)聽3000端口。具體的功能是：在瀏覽器中訪問:localhost:3000時(shí)菱皆，就會(huì)直接顯示3000.html的內(nèi)容须误。
3000.html
下面的代碼是一個(gè)靜態(tài)的html挨稿。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.11.0.js"></script>
</head>
<body>
<p>通過node port3000.js 可以打開這個(gè)頁面。</p>
<p> 討論ajax跨域</p>
<button id="btn3000">ajax請(qǐng)求3000端口</button>
<button id="btn4000">ajax請(qǐng)求4000端口</button>
<button id="btn4000jsonp">ajax請(qǐng)求4000端口-jsonp</button>
<button id="btnzhihu">ajax直接請(qǐng)求zhihu</button>
<button id="btnzhihu_server">服務(wù)器代理請(qǐng)求zhihu</button>
<hr>
<div id="result">
</div>
</body>
</html>
我們引入jquery-1.11.0.js文件是用了使用其中的ajax方法京痢。
創(chuàng)建好上面兩個(gè)文件后奶甘，我們就可以在當(dāng)前目錄下，通過node命令去運(yùn)行3000.js文件了祭椰。
類似于如下：
上面只是啟動(dòng)了服務(wù)臭家，接下來還需要通過瀏覽器去訪問這個(gè)服務(wù)：
你看到的頁面就是3000.html文件。
data.json
這個(gè)json文件方淤，用來模擬數(shù)據(jù)源钉赁。
{
"name":"jake",
"age":30
}
同源請(qǐng)求數(shù)據(jù)
給按鈕"ajax請(qǐng)求3000端口"添加點(diǎn)擊事件。
$("#btn3000").on("click",function(){
console.info("btn3000");
$.getJSON("/getData",function(d){
console.log(d)
$("#result").html(JSON.stringify(d));
})
});
注意: getJSON是$.ajax 的一個(gè)快捷寫法携茂，用來請(qǐng)求json數(shù)據(jù)你踩。它的第一個(gè)參數(shù)就是要請(qǐng)求的地址。也就相當(dāng)于localhost:3000/getData讳苦。此時(shí)姓蜂，直接點(diǎn)擊按鈕肯定會(huì)報(bào)錯(cuò)的，因?yàn)槟阍趀xpress中沒有設(shè)置這個(gè)路由医吊。
所以接下來钱慢，你還需要在port3000.js中去添加一段代碼：
const app = express();
app.use(express.static(path.join(__dirname, "/public")));
app.get("/",(req,res)=>{
res.sendFile(__dirname +"/3000.html"); //直接引入3000.html文件
});
app.get("/getData",(req,res)=>{
let d = require("./data.json");
res.json(d); // 直接輸出json
});
app.listen(3000,()=>{
console.log("http server is listening in port 3000...")
})
上面的app.get("/getData")這段就是設(shè)置了一個(gè)路由，其響應(yīng)就是直接訪問data.json文件卿堂，并以json的格式輸出束莫。
由于你修改了port3000.js，所以你需要重新運(yùn)行 node port3000命令草描。
刷新瀏覽器览绿，點(diǎn)擊按鈕"ajax請(qǐng)求3000端口" ，你會(huì)看到類似如下效果：
好的穗慕，以上是同源的饿敲，沒什么難度。下面進(jìn)入正題逛绵。
跨域訪問
按上面所述跨域有很多種表現(xiàn)怀各，下面模擬一下“端口號(hào)不同”的跨域。
得益于express框架术浪，我們可以快速地在本機(jī)上搭建另一個(gè)端口號(hào)的服務(wù)瓢对。創(chuàng)建port4000.js文件。具體代碼如下：
const express = require("express");
const path = require("path");
const app = express();
app.get("/",(req,res)=>{
res.sendFile(__dirname +"/4000.html");
});
app.get("/getData",(req,res)=>{ //提供對(duì)localhost:4000/getData的響應(yīng)
let d = require("./data.json");
res.json(d); // 直接輸出json
});
app.listen(4000,()=>{
console.log("http server is listening in port 4000...")
})
它需要有一個(gè)4000.html(這個(gè)文件只是打醬油的)
4000.html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>通過node port4000.js 可以打開這個(gè)頁面胰苏。</p>
</body>
</html>
ok硕蛹，在當(dāng)前目錄下，運(yùn)行node port4000.js
新開一個(gè)瀏覽器窗口，訪問4000端口：
在此為止法焰，我們已經(jīng)在本機(jī)上通過express服務(wù)模擬了兩個(gè)域秧荆，分別是"localhost:3000"和"localhost:4000"，它們分別由port3000.js和port4000.js支持埃仪。并且你可以分別通過localhost:3000/getData和localhost:4000/getData去顯示data.json中的數(shù)據(jù)乙濒。
下面，我們要實(shí)現(xiàn)的功能是：在localhost:3000這個(gè)域中通過ajax去訪問localhost:4000/getData這個(gè)接口贵试。
在3000.html中編寫代碼，給"ajax請(qǐng)求4000端口"添加點(diǎn)擊事件響應(yīng)
$("#btn4000").on("click",function(){
console.info("btn4000");
$.ajax({
type:"GET",
url:"http://localhost:4000/getData",
dataType:"json",
success:function(d){
console.log(d)
$("#result").html(JSON.stringify(d));
}
});
})
上面的$.ajax寫法等價(jià)于$.json凯正，就是換個(gè)寫法而已毙玻。
點(diǎn)擊這個(gè)按鈕，在瀏覽器的控制臺(tái)下廊散，你會(huì)看到如下的錯(cuò)誤：
這就是我們說的跨域的錯(cuò)誤桑滩。
解決方法一：jsonp
script標(biāo)簽可以用來引入外部的js文件，格式是：
<script src="地址"></script>
例如：
<script src="jquery.js"></script>
當(dāng)然允睹，這個(gè)地址是一個(gè)網(wǎng)絡(luò)的地址也是ok的运准，如
<script src ="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
并且，它不需要遵守同源策略缭受。這僦是核心的原理胁澳。
下面開個(gè)腦洞。
如果你在3000.html中加這一句：
<script src ="http://localhost:4000/getData"><script>
會(huì)有什么后果呢米者？
顯然韭畸，它這個(gè)頁面就會(huì)去請(qǐng)求http://localhost:4000/getData這個(gè)路徑，并且這一步不需要遵守同源策略的蔓搞。這實(shí)際上就已經(jīng)實(shí)現(xiàn)了跨域訪問的一大半了胰丁。接下來，我們只需要保證從http://localhost:4000/getData得到的內(nèi)容是一段標(biāo)準(zhǔn)的js代碼就可以了喂分。
我們可以進(jìn)一步在port4000.js中設(shè)置如下路由響應(yīng)：
app.get("/getData",(req,res)=>{
res.end("alert('fyf')"); // alert('fyfy')就是一段js代碼啦锦庸。
});
到此為止，你打開http://localhost:3000時(shí)蒲祈，就可以看到一個(gè)彈出框了甘萧。
就上就是jsonp的原理。
下面我們用它來解決實(shí)際的問題：如何從http://localhost:4000/getData得到一些數(shù)據(jù)梆掸，并進(jìn)行操作幔嗦？
兩個(gè)地方改進(jìn)：
- 修改port4000.js中設(shè)置如下路由響應(yīng)：
app.get("/getData",(req,res)=>{
let d = require("./data.json");//在服務(wù)器端獲取數(shù)據(jù)
res.end(doSomething+"("+JSON.stringify(d)+")");//拼接js 函數(shù)
//結(jié)果是:doSomething(JSON.stringify(d))
});
2.在3000.html中添加doSomething函數(shù)。
doSomething(d){
//其它操作
console.info(d)沥潭；
};//新加的
<script src="http://localhost:4000/getData"><script>
再次重啟node port4000.js邀泉，并刷新localhost:3000，你就可以直接在控制臺(tái)看見結(jié)果了。
jsonp總結(jié)：
（1）在script的src中設(shè)置請(qǐng)求的地址汇恤，并設(shè)置一個(gè)用于操作數(shù)據(jù)的函數(shù)f庞钢。
（2）在服務(wù)器設(shè)置這個(gè)請(qǐng)求的響應(yīng)是一個(gè)標(biāo)準(zhǔn)的js函數(shù)調(diào)用格式，保證兩點(diǎn)：第一因谎，函數(shù)名是就f基括；第二，函數(shù)的參數(shù)是要返回去的數(shù)據(jù)财岔。
拓展：點(diǎn)擊一次按鈕才去實(shí)現(xiàn)jsonp
function addScriptTag(src) {
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);//動(dòng)態(tài)添加script標(biāo)簽
}
按鈕.onclick= function () {
addScriptTag("http://localhost:4000/getData");
}
function doSomething(d) { console.log(d);};
搞定风皿！
ok，以上你已經(jīng)實(shí)現(xiàn)了jsonp了匠璧。下面我們?cè)賮砜纯此亩x
JSONP(JSON with Padding)是JSON的一種“使用模式”,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題桐款。
from 百度百科
其實(shí)，你發(fā)現(xiàn)沒有 它與ajax真的一點(diǎn)關(guān)系也沒有夷恍。
在實(shí)際的開發(fā)中魔眨，我們的使用方法會(huì)很簡(jiǎn)單，因?yàn)榈谌綆欤ㄈ鏹query）已經(jīng)幫助我們封裝好了這樣操作酿雪，我們直接調(diào)用即可遏暴。
接著上面的例子,給3000.html中的按鈕添加點(diǎn)擊事件：
$("#btn4000jsonp").on("click",function(){
console.info("btn4000jsonp");
$.ajax({
type:"GET",
url:"http://localhost:4000/getDataJsonp",
dataType:"jsonp",//這是重點(diǎn)
success:function(d){
console.log(d)
$("#result").html(JSON.stringify(d));
}
});
})
在port4000.js中，添加一個(gè)路由處理：
app.get("/getDataJsonp",(req,res)=>{
let d = require("./data.json");
res.jsonp(d); // 不是json指黎，是jsonp
});
重啟port4000.js朋凉，刷新localhost:3000，點(diǎn)擊“ajax請(qǐng)求4000端口-jsonp” 查看效果醋安。
其它兩種解決方法侥啤，明天繼續(xù)。
（完）
