前言部分
一堂湖、跨域是什么？
跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源（廣義的）撕氧。
廣義的跨域場(chǎng)景有以下幾種：
資源的跳轉(zhuǎn)：A鏈接、重定向喇完、表單提交伦泥；
資源嵌入：<link>、<script>、<img>不脯、<iframe> 等DOM標(biāo)簽府怯，還有樣式中 background:url()、@font-face() 等文件外鏈防楷；
腳本請(qǐng)求： js發(fā)起的ajax請(qǐng)求牺丙、dom和js對(duì)象的跨域操作等；
我們通常所說(shuō)的跨域是狹義的复局，是由瀏覽器同源策略限制的一類(lèi)請(qǐng)求場(chǎng)景冲簿。
二、同源策略是什么亿昏？
同源策略/SOP（Same origin policy）是一種約定峦剔，由 Netscape 公司 1995 年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能龙优，如果缺少了同源策略羊异，瀏覽器很容易受到XSS（跨站腳本攻擊）事秀、CSFR（Cross-site request forgery 跨站請(qǐng)求偽造）等攻擊彤断。所謂同源是指 ”協(xié)議+域名+端口” 三者相同，即便兩個(gè)不同的域名指向同一個(gè) ip 地址易迹，也非同源宰衙。
跨域的安全限制，主要是針對(duì)瀏覽器端來(lái)說(shuō)的睹欲，服務(wù)器端是不存在跨域安全限制的供炼。
瀏覽器的同源策略限制從一個(gè)源加載的文檔或腳本與來(lái)自另一個(gè)源的資源進(jìn)行交互。如果協(xié)議窘疮、端口和主機(jī)對(duì)于兩個(gè)頁(yè)面是相同的袋哼，則兩個(gè)頁(yè)面具有相同的源，否則就是不同源的闸衫。如果要在js里發(fā)起跨域請(qǐng)求涛贯，則要進(jìn)行一些特殊處理了∥党觯或者弟翘，你可以把請(qǐng)求發(fā)到自己的服務(wù)端，再通過(guò)后臺(tái)代碼發(fā)起請(qǐng)求骄酗，再將數(shù)據(jù)返回前端稀余。
同源策略限制以下幾種行為：
Cookie、LocalStorage 和 IndexDB 無(wú)法讀惹鞣睛琳；
DOM 和 Js對(duì)象無(wú)法獲得；
AJAX 請(qǐng)求不能發(fā)送；
三师骗、常見(jiàn)的跨域場(chǎng)景有哪些茁影？
| URL | 說(shuō)明 | 是否允許通訊 |
|---|---|---|
|
http://www.demo.com/a.js http://www.demo.com/b.js http://www.demo.com/lab/c.js |
同一域名，不同文件或路徑 | 允許 |
|
http://www.demo.com:8000/a.js http://www.demo.com/b.js |
同一域名丧凤，不同端口 | 不允許 |
|
http://www.demo.com/a.js https://www.demo.com/b.js |
同一域名募闲，不同協(xié)議 | 不允許 |
|
http://www.demo.com/a.js http://127.0.0.1/b.js |
域名和域名對(duì)應(yīng)相同 IP | 不允許 |
|
http://www.demo.com/a.js http://x.demo.com/b.js http://demo.com/c.js |
主域相同，子域不同 | 不允許 |
示例說(shuō)明：
表格前三種和最后一種情況比較好理解愿待，不贅述浩螺；
-
以上表格中第四個(gè) “域名和域名對(duì)應(yīng)相同IP” 不允許通信，雖然對(duì)應(yīng)的IP地址是相同仍侥，但是也是不同的域名要出，這種也是判定為跨域的。
我遇到的示例：做微信公眾號(hào)的測(cè)試號(hào)配置時(shí)农渊，需要在測(cè)試號(hào)的 體驗(yàn)接口權(quán)限表 - 網(wǎng)頁(yè)服務(wù) - 網(wǎng)頁(yè)帳號(hào) - 網(wǎng)頁(yè)授權(quán)獲取用戶(hù)基本信息 中配置 授權(quán)回調(diào)頁(yè)面域名患蹂，這里配置的域名需要和提供公眾號(hào)訪(fǎng)問(wèn)的域名保持一致，我理解的也就是保證非跨域情況配置砸紊。經(jīng)過(guò)我多次踩坑传于，發(fā)現(xiàn)以下幾種情況域名配置微信是無(wú)法進(jìn)行授權(quán)回調(diào)的：- 公司內(nèi)網(wǎng) IP 地址，經(jīng)過(guò)外網(wǎng)映射之后形成的 IP 地址醉顽；
- IP 地址對(duì)應(yīng)的一個(gè)域名沼溜；
- IP 地址相同，對(duì)應(yīng)端口號(hào)未配置游添；
第3條情況對(duì)應(yīng)表格第二個(gè)“同一域名系草，不同端口”不允許訪(fǎng)問(wèn)，需要將端口嚴(yán)格保持一致唆涝。
第1找都、2 條兩種情況其實(shí)和表格中第四個(gè)的情況都是一回事，是屬于 “域名和域名對(duì)應(yīng)相同 IP” 的情況廊酣。后來(lái)我使用了內(nèi)網(wǎng)的IP去設(shè)置能耻，使授權(quán)回調(diào)IP和配置在公眾號(hào)菜單訪(fǎng)問(wèn)的地址鏈接中的IP保持一致，完成了授權(quán)啰扛。
四嚎京、解決方案
- 通過(guò) jsonp 跨域；
- document.domain + iframe 跨域隐解；
- location.hash + iframe鞍帝；
- window.name + iframe 跨域；
- postMessage 跨域煞茫；
- 跨域資源共享（CORS）帕涌；
- nginx 代理跨域摄凡；
- nodejs 中間件代理跨域；
- WebSocket 協(xié)議跨域蚓曼；
跨域的幾種解決方案
一亲澡、jsonp 方式
jsonp (json with padding) 是 json 的一種“使用模式”，是為了解決跨域問(wèn)題而產(chǎn)生的解決方案纫版。
1床绪、 jsonp 產(chǎn)生：
- AJAX 直接請(qǐng)求普通文件存在跨域無(wú)權(quán)限訪(fǎng)問(wèn)的問(wèn)題, 盡管是靜態(tài)頁(yè)面；
- 我們?cè)谡{(diào)用 js 文件的時(shí)候又不受跨域影響,比如引入 jquery 框架的時(shí)候其弊；
- 凡是擁有 src 這個(gè)屬性的標(biāo)簽都可以跨域例如 <script> <img> <iframe>;
- 如果想通過(guò)純web端跨域訪(fǎng)問(wèn)數(shù)據(jù)只有一種可能,那就是把遠(yuǎn)程服務(wù)器上的數(shù)據(jù)裝進(jìn)js格式的文件里癞己；
- json 是一個(gè)輕量級(jí)的數(shù)據(jù)格式,還被 js 原生支持；
- 為了便于客戶(hù)端使用數(shù)據(jù)梭伐，逐漸形成了一種非正式傳輸協(xié)議痹雅，人們把它稱(chēng)作JSONP，該協(xié)議的一個(gè)要點(diǎn)就是允許用戶(hù)傳遞一個(gè)callback 參數(shù)給服務(wù)端糊识；
2绩社、舉例：
以下是使用jQuery的jsonp發(fā)起跨域請(qǐng)求的例子描述，并總結(jié)赂苗。為了將過(guò)程描述清楚愉耙，內(nèi)容過(guò)長(zhǎng)，可以備一杯??慢慢享用~
- 我們先來(lái)看一看模擬靜態(tài)文件訪(fǎng)問(wèn)跨域情況：
只前端自己寫(xiě)一寫(xiě)代碼哑梳，在不同端口形成的跨域情況下進(jìn)行模擬劲阎；
MacBook 的本地服務(wù)端口配置鏈接我已在文末附上，感興趣的可以翻到末尾查閱鸠真。準(zhǔn)備環(huán)境
Macbook users 路徑下的站點(diǎn)，用自帶Apache 配置一個(gè) *8001 端口龄毡，Apache默認(rèn)端口 *80 (/Library/WebServer/Document) 端口吠卷。端口不一樣，構(gòu)成跨域條件沦零。開(kāi)始模擬祭隔，使用 <script> 標(biāo)簽實(shí)現(xiàn)跨域訪(fǎng)問(wèn)
-
測(cè)試文件準(zhǔn)備
端口為 *8001
站點(diǎn)目錄：
8001站點(diǎn)目錄.png
代碼如下, 文件名稱(chēng)寫(xiě)在代碼頂部：
<!--requestTest.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域測(cè)試</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
/* 演示端口不同引起的跨域
*
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
// url: 'http://localhost:8001/student', // 默認(rèn)的 *8001 端口站點(diǎn), 數(shù)據(jù)所在位置，跨域條件達(dá)成
// url: 'http://localhost:8080/message', // 自己配置的 users 下的 *8080 端口站點(diǎn)路操，數(shù)據(jù)所在位置疾渴，非跨域
type: 'GET',
success: function (data) {
$(text).val(JSON.stringify(data))
}
})
})
})
*/
var message = function(data) {
console.log('執(zhí)行 message 方法.返回?cái)?shù)據(jù)為：', data)
alert(data[1].title)
}
</script>
<!--使用 jsonp 實(shí)現(xiàn)跨域請(qǐng)求，用 js 包裹數(shù)據(jù)屯仗，可以訪(fǎng)問(wèn)搞坝。（這種情況更適用于前端的處理）-->
<!--經(jīng)測(cè)試，在未拼接 callback 的情況下魁袜，瀏覽器執(zhí)行完這倆 js 文件桩撮，自動(dòng)匹配了 message 方法敦第。效果相同-->
<script type="text/javascript" src="http://localhost:8080/message?callback=message"></script>
</head>
<body>
<input id="btn" type="button" value="跨域獲取數(shù)據(jù)">
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>
/**
* student.json
*/
[{
"age": 22,
"birthday": "2018-1-10 12:12",
"id": 1,
"major": "信息管理",
"name": "Damon",
"status": true
}, {
"age": 23,
"birthday": "2018-1-10 12:12",
"id": 2,
"major": "軟件工程",
"name": "John",
"status": true
}, {
"age": 24,
"birthday": "2018-1-10 12:12",
"id": 3,
"major": "計(jì)算機(jī)科學(xué)與技術(shù)",
"name": "Sonia",
"status": true
}, {
"age": 22,
"birthday": "2018-1-10 12:12",
"id": 4,
"major": "計(jì)算機(jī)科學(xué)與技術(shù)",
"name": "Mary",
"status": true
}]
端口為8080
站點(diǎn)目錄：
代碼如下：
/**
* message.js
*/
console.log('服務(wù)器端執(zhí)行前端傳來(lái)的 message 方法。并攜帶參數(shù)返回店量。')
message([
{"id":"1", "title":"上海新聞聯(lián)播芜果，12歲的小王竟然比年僅六歲的小李大6歲！"},
{"id":"2", "title":"樓市告別富得流油 專(zhuān)家:房?jī)r(jià)下跌是大概率事件"},
{"id":"3", "title":"股市暴跌融师，雙十一戰(zhàn)績(jī)赫然右钾，這究竟是什么鬼迷了心竅？旱爆！"},
{"id":"4", "title":"沒(méi)有運(yùn)氣霹粥，不要玩A股，你以為的谷底疼鸟，只是下一個(gè)高地后控！"},
{"id":"5", "title":"美麗新世界，啦啦啦啦啦~"},
{"id":"6", "title":"國(guó)際要聞：聽(tīng)說(shuō)昨天特朗普因?yàn)橄聜€(gè)小雨沒(méi)去開(kāi)會(huì)空镜！"},
{"id":"7", "title":"易烊千璽太帥浩淘，阿姨、媽媽吴攒、女友张抄、姐姐組成的幾千萬(wàn)粉絲高呼請(qǐng)他停止散發(fā)魅力！"},
{"id":"8", "title":"謝耳朵和艾米結(jié)婚了洼怔，好感動(dòng)署惯！"},
{"id":"9", "title":"如果明天不下雨，竟然也不一定看到太陽(yáng)镣隶！"},
{"id":"10", "title":"沒(méi)有新聞了极谊。"}
]);
-
演示
在8001端口下的 requestTest.html 文件中，訪(fǎng)問(wèn)本端口映射的文件中的student文件安岂，并展示在頁(yè)面中轻猖，可正常訪(fǎng)問(wèn)到，結(jié)果如下:
8001_student.png
在8001端口下 requestTest.html 文件中域那，訪(fǎng)問(wèn) 8080端口下的文件 message.js:
該請(qǐng)求報(bào)錯(cuò)咙边，提示跨域不被允許：
在8001端口下 requestTest.html 文件中，通過(guò) <script> 標(biāo)簽 包裹message.js 的請(qǐng)求:
可以看到跨域報(bào)錯(cuò)信息不見(jiàn)了次员，可以正常訪(fǎng)問(wèn)到數(shù)據(jù)：
總結(jié)：能夠正常訪(fǎng)問(wèn)數(shù)據(jù)败许，script 標(biāo)簽可以得到其他來(lái)源的數(shù)據(jù)，這也是jsonp的理論依據(jù)淑蔚。缺點(diǎn)：只能進(jìn)行g(shù)et 請(qǐng)求市殷，無(wú)法訪(fǎng)問(wèn)服務(wù)器的響應(yīng)文本（單向請(qǐng)求）。
- 現(xiàn)在來(lái)看jQuery 的 jsonp 方式跨域請(qǐng)求束倍，結(jié)合后臺(tái)服務(wù)器進(jìn)行 jsonp 請(qǐng)求：
這部分內(nèi)容是后臺(tái)小伙伴幫忙完成的被丧，這里也非常感謝不辭勞苦盟戏，不厭其煩替我解答還幫我寫(xiě)demo的后臺(tái)小伙伴！
服務(wù)端代碼如下：
protected final static String CHARSET = ";charset=UTF-8";
@RequestMapping(value = "/rest/public/weChat/subscription/queryAuthTaskStatus" ,method = RequestMethod.GET,produces = MediaType.APPLICATION_JSON_VALUE + CHARSET)
@ResponseBody
public void queryTaskStatus(HttpServletRequest request, PrintWriter out, HttpServletResponse response)throws ServletException, IOException {
List<Student> studentList = new ArrayList();
Student student = new Student();
student.setName("Zhangshan");
student.setAge("23");
student.setMajor("前端html");
student.setStatus(true);
studentList.add(student);
Student student2 = new Student();
student2.setName("list");
student2.setAge("20");
student2.setMajor("java開(kāi)發(fā)");
student2.setStatus(true);
studentList.add(student2);
Student student3 = new Student();
student3.setName("李明");
student3.setAge("18");
student3.setMajor("數(shù)據(jù)部門(mén)");
student3.setStatus(false);
studentList.add(student3);
JSONArray jsonArray = JSONArray.fromObject(studentList);
String result = jsonArray.toString();
//前端傳過(guò)來(lái)的回調(diào)函數(shù)名稱(chēng)
String callback = request.getParameter("callback");
//前端傳過(guò)來(lái)的回調(diào)函數(shù)名稱(chēng)
result = callback + "(" +result+")";
response.getWriter().write(result);
//out.write(result);
//out.flush();
//out.close();
}
}
我們首先看一下采用ajax 普通方式進(jìn)行請(qǐng)求甥桂， js 代碼如下：
$ajax({
url: "http://localhost:8082/SSM2/rest/public/weChat/subscription/query/queryAuthTaskStatus",
type: "get",
datatype: "json", // 指定服務(wù)器返回的數(shù)據(jù)類(lèi)型
success: function(data) {
alert(asd);
// var asd = JSON.stringify(data);
}
});
普通方式請(qǐng)求提示跨域無(wú)法訪(fǎng)問(wèn)柿究，結(jié)果如圖：
然后我們更改代碼，使用ajax jsonp方式請(qǐng)求黄选，如果使用簡(jiǎn)單的方式蝇摸，就只需配置 dataType: ‘jsonp’,就可以發(fā)起一個(gè)跨域請(qǐng)求。jsonp 指定服務(wù)器返回的數(shù)據(jù)類(lèi)型為 jsonp 格式办陷，可以看到請(qǐng)求的路徑自動(dòng)帶了一個(gè)callback=xxx貌夕，xxx是 jQuery隨機(jī)生成的一個(gè)回調(diào)函數(shù)名稱(chēng)。
服務(wù)器端代碼不變民镜，js 代碼截圖如下:
可正常訪(fǎng)問(wèn)數(shù)據(jù)啡专，請(qǐng)求結(jié)果如下(示例中json 數(shù)據(jù)解析出現(xiàn)亂碼，暫時(shí)忽略):
以上的例子能簡(jiǎn)單看到 jsonp 是能夠完成跨域請(qǐng)求的制圈，結(jié)合前后臺(tái)的配合们童，也更好理解怎么使用 jsonp 。
- 我們?cè)賮?lái)簡(jiǎn)單看下如何指定 jsonp 回調(diào)函數(shù)：
以下的例子和解說(shuō)我搬運(yùn)自：https://www.cnblogs.com/chiangchou/p/jsonp.html鲸鹦。
上代碼：
1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>跨域測(cè)試</title>
5 <script src="js/jquery-1.7.2.js"></script>
6 <script>
7
8 function showData (data) {
9 console.info("調(diào)用showData");
10
11 var result = JSON.stringify(data);
12 $("#text").val(result);
13 }
14
15 $(document).ready(function () {
16
17 // window.showData = function (data) {
18 // console.info("調(diào)用showData");
19 //
20 // var result = JSON.stringify(data);
21 // $("#text").val(result);
22 // }
23
24 $("#btn").click(function () {
25
26 $.ajax({
27 url: "http://localhost:9090/student",
28 type: "GET",
29 dataType: "jsonp", //指定服務(wù)器返回的數(shù)據(jù)類(lèi)型
30 jsonpCallback: "showData", //指定回調(diào)函數(shù)名稱(chēng)
31 success: function (data) {
32 console.info("調(diào)用success");
33 }
34 });
35 });
36
37 });
38 </script>
39 </head>
40 <body>
41 <input id="btn" type="button" value="跨域獲取數(shù)據(jù)" />
42 <textarea id="text" style="width: 400px; height: 100px;"></textarea>
43
44 </body>
45 </html>
回調(diào)函數(shù)可以寫(xiě)到<script>里（默認(rèn)屬于window對(duì)象）慧库，或者指明寫(xiě)到window對(duì)象里，看jQuery源碼馋嗜，可以看到j(luò)Query調(diào)用回調(diào)函數(shù)時(shí)齐板，是調(diào)用的window.callback。代碼如上葛菇，看調(diào)用結(jié)果發(fā)現(xiàn)甘磨，請(qǐng)求時(shí)帶的參數(shù)是callback=showData,然后再調(diào)用了success【2，文末注解】熟呛。所以success是返回成功以后必定會(huì)調(diào)的函數(shù)宽档。
如果想要更改 callback 這個(gè)參數(shù)的名稱(chēng)，參考以下代碼第23行庵朝。
1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>跨域測(cè)試</title>
5 <script src="js/jquery-1.7.2.js"></script>
6 <script>
7
8 function showData (data) {
9 console.info("調(diào)用showData");
10
11 var result = JSON.stringify(data);
12 $("#text").val(result);
13 }
14
15 $(document).ready(function () {
16
17 $("#btn").click(function () {
18
19 $.ajax({
20 url: "http://localhost:9090/student",
21 type: "GET",
22 dataType: "jsonp", //指定服務(wù)器返回的數(shù)據(jù)類(lèi)型
23 jsonp: "theFunction", //指定參數(shù)名稱(chēng)
24 jsonpCallback: "showData", //指定回調(diào)函數(shù)名稱(chēng)
25 success: function (data) {
26 console.info("調(diào)用success");
27 }
28 });
29 });
30
31 });
32 </script>
33 </head>
34 <body>
35 <input id="btn" type="button" value="跨域獲取數(shù)據(jù)" />
36 <textarea id="text" style="width: 400px; height: 100px;"></textarea>
37
38 </body>
39 </html>
如此以來(lái)后臺(tái)也要跟著改變，找到我前面的例子jQuery 的 jsonp 方式跨域請(qǐng)求中后臺(tái)代碼又厉，找到下圖對(duì)應(yīng)位置并作出修改：
把getParameter(“callback”)里的callback改成前面23行代碼配置的函數(shù)名“theFunction”即可九府。
經(jīng)測(cè)試，無(wú)法進(jìn)行POST請(qǐng)求覆致，要測(cè)試就將前面的請(qǐng)求方式更改成POST即可侄旬，結(jié)果如下：
jsonp 本質(zhì)就是執(zhí)行了JavaScript。是通過(guò) script 標(biāo)簽的開(kāi)放策略煌妈，使網(wǎng)頁(yè)可以獲取其他來(lái)源的數(shù)據(jù)儡羔，用 jsonp 獲取的數(shù)據(jù)也不是真正的 json,而是任意的JavaScript, 用JavaScript解釋器宣羊，而不是用json解析器解析，ajax 只是對(duì)腳本請(qǐng)求做了封裝汰蜘。所以仇冯，ajax 的 jsonp 請(qǐng)求也是不支持 POST 的。在谷歌瀏覽器Chrome中查看 jsonp 發(fā)送的請(qǐng)求都是js類(lèi)型族操，而不是 xhr【1苛坚，文末注解】 ：【圖片來(lái)源自水印地址】
3、總結(jié)
綜上一大堆解釋和示例色难，我們可以對(duì) jsonp 原理作如下簡(jiǎn)單描述：
以下例子是較早學(xué)習(xí)跨域看到的描述泼舱，覺(jué)得寫(xiě)得很好，當(dāng)時(shí)只記錄了這個(gè)片段枷莉，未保存出處娇昙，若有人看到過(guò)望在評(píng)論指出，我會(huì)補(bǔ)上笤妙。也在此對(duì)作者表達(dá)歉意冒掌，并檢討以后摘錄要記下出處。
首先我們假設(shè)a網(wǎng)頁(yè)調(diào)用b網(wǎng)站的服務(wù)
- a 網(wǎng)站需要準(zhǔn)備一個(gè)方法危喉，例如 callback(args);
- a 網(wǎng)站在頁(yè)面中插入一個(gè) <script> 標(biāo)簽宋渔，src 指向 b 網(wǎng)站的地址，并帶上callback 作為參數(shù);
- b網(wǎng)站接受請(qǐng)求處理后辜限，把結(jié)果和回調(diào)方法的名字組成一個(gè)字符串返回皇拣，例如callback(‘data’);
- 由于是 script 標(biāo)簽，b 網(wǎng)站返回的字符串會(huì)被當(dāng)成js解析執(zhí)行薄嫡，相當(dāng)于調(diào)用到了 callback 方法;
- 主要利用了 script（img, iframe等有src屬性的標(biāo)簽）可以跨站點(diǎn)訪(fǎng)問(wèn)的特性氧急，且只能用 GET 請(qǐng)求，需要服務(wù)端做點(diǎn)配合毫深，并且需要信任服務(wù)器(安全考慮)吩坝。jquery 的 jsonp ajax 只是封裝了這個(gè)過(guò)程，讓你看上去和普通 ajax 沒(méi)什么區(qū)別哑蔫，其實(shí)卻一點(diǎn)關(guān)系都沒(méi)有钉寝。
二、跨域資源共享
跨域資源共享（CORS）是一種網(wǎng)絡(luò)瀏覽器的技術(shù)規(guī)范闸迷，它為web服務(wù)器定義了一種方式嵌纲，允許網(wǎng)頁(yè)從不同的域訪(fǎng)問(wèn)資源盛险。CORS就是為了讓AJAX可以實(shí)現(xiàn)可控的跨域訪(fǎng)問(wèn)而生的准谚。
1、內(nèi)部機(jī)制講解
1) 簡(jiǎn)介
通過(guò)在HTTP Header中加入擴(kuò)展字段重慢，服務(wù)器在相應(yīng)網(wǎng)頁(yè)頭部加入字段表示允許訪(fǎng)問(wèn)的domain和HTTP method今阳，客戶(hù)端檢查自己的域是否在允許列表中师溅，決定是否處理響應(yīng)茅信。
CORS 需要瀏覽器和服務(wù)器同時(shí)支持。目前所有瀏覽器都支持該功能墓臭，IE瀏覽器不能低于IE10蘸鲸。
整個(gè) CORS 通信過(guò)程，都是瀏覽器自動(dòng)完成起便，不需要用戶(hù)參與棚贾。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，CORS 通信與同源的 AJAX 通信沒(méi)有差別榆综，代碼完全一樣妙痹。瀏覽器一旦發(fā)現(xiàn) AJAX 請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息鼻疮，有時(shí)還會(huì)多出一次附加的請(qǐng)求怯伊，但用戶(hù)不會(huì)有感覺(jué)。
因此判沟，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器耿芹。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信挪哄。
2) 兩種請(qǐng)求
瀏覽器將 cors 請(qǐng)求分為兩種請(qǐng)求：簡(jiǎn)單請(qǐng)求 和 非簡(jiǎn)單請(qǐng)求吧秕。簡(jiǎn)單請(qǐng)求就是使用設(shè)定的請(qǐng)求方式請(qǐng)求數(shù)據(jù)
而非簡(jiǎn)單請(qǐng)求則是在使用設(shè)定的請(qǐng)求方式請(qǐng)求數(shù)據(jù)之前,先發(fā)送一個(gè)OPTIONS請(qǐng)求,看服務(wù)端是否允許客戶(hù)端發(fā)送非簡(jiǎn)單請(qǐng)求.只有"預(yù)檢"通過(guò)后才會(huì)再發(fā)送一次請(qǐng)求用于數(shù)據(jù)傳輸。（例子迹炼，get砸彬、put 請(qǐng)求方式的區(qū)別）。
只要同時(shí)滿(mǎn)足以下兩大條件斯入，就屬于簡(jiǎn)單請(qǐng)求砂碉。
（1) 請(qǐng)求方法是以下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data刻两、text/plain
凡是不同時(shí)滿(mǎn)足上面兩個(gè)條件增蹭，就屬于非簡(jiǎn)單請(qǐng)求。
瀏覽器對(duì)這兩種請(qǐng)求的處理磅摹，是不一樣的滋迈。
3) 簡(jiǎn)單請(qǐng)求：
瀏覽器對(duì)于簡(jiǎn)單的請(qǐng)求，直接發(fā)起 cors 請(qǐng)求户誓。具體的說(shuō)杀怠，就是在請(qǐng)求頭加上 Origin 字段。
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
上面的頭信息中厅克，Origin字段用來(lái)說(shuō)明，本次請(qǐng)求來(lái)自哪個(gè)源（協(xié)議 + 域名 + 端口）橙依。服務(wù)器根據(jù)這個(gè)值证舟，決定是否同意這次請(qǐng)求硕旗。
如果Origin指定的源，不在許可范圍內(nèi)女责，服務(wù)器會(huì)返回一個(gè)正常的HTTP回應(yīng)漆枚。瀏覽器發(fā)現(xiàn)，這個(gè)回應(yīng)的頭信息沒(méi)有包含Access-Control-Allow-Origin字段（詳見(jiàn)下文）抵知，就知道出錯(cuò)了墙基，從而拋出一個(gè)錯(cuò)誤，被XMLHttpRequest的onerror回調(diào)函數(shù)捕獲刷喜。注意残制，這種錯(cuò)誤無(wú)法通過(guò)狀態(tài)碼識(shí)別，因?yàn)镠TTP回應(yīng)的狀態(tài)碼有可能是200掖疮。（ps: 我理解具體就是請(qǐng)求的回應(yīng)狀態(tài)為200初茶，但是會(huì)在控制臺(tái)提示錯(cuò)誤信息，access-origin-check）
如果Origin指定的域名在許可范圍內(nèi)浊闪，服務(wù)器返回的響應(yīng)恼布，會(huì)多出幾個(gè)頭信息字段。
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
上面的頭信息之中搁宾，有三個(gè)與CORS請(qǐng)求相關(guān)的字段折汞，都以Access-Control-開(kāi)頭。注意這幾個(gè)是響應(yīng)頭里的盖腿，由服務(wù)器端設(shè)置爽待。
-
Access-Control-Allow-Origin
該字段是必須的。它的值要么是請(qǐng)求時(shí)
Origin字段的值奸忽，指定域名的請(qǐng)求; 要么是一個(gè)*堕伪，表示接受任意域名的請(qǐng)求。 -
Access-Control-Allow-Credentials
該字段可選栗菜。它的值是一個(gè)布爾值欠雌，表示是否允許發(fā)送 Cookie。默認(rèn)情況下疙筹，Cookie 不包括在CORS請(qǐng)求之中富俄。設(shè)為
true，即表示服務(wù)器明確許可而咆，Cookie可以包含在請(qǐng)求中霍比，一起發(fā)給服務(wù)器。這個(gè)值也只能設(shè)為true暴备，如果服務(wù)器不要瀏覽器發(fā)送Cookie悠瞬，刪除該字段即可。 -
Access-Control-Expose-Headers
該字段可選。CORS請(qǐng)求時(shí)浅妆，
XMLHttpRequest對(duì)象的getResponseHeader()方法只能拿到6個(gè)基本字段：Cache-Control望迎、Content-Language、Content-Type凌外、Expires辩尊、Last-Modified、Pragma康辑。如果想拿到其他字段摄欲，就必須在Access-Control-Expose-Headers里面指定。上面的例子指定疮薇，getResponseHeader('Set-Cookie')可以返回Set-Cookie(服務(wù)器為瀏覽器設(shè)置cookie)字段的值胸墙。
上面說(shuō)到，CORS請(qǐng)求默認(rèn)不發(fā)送Cookie和HTTP認(rèn)證信息惦辛。如果要把Cookie發(fā)到服務(wù)器劳秋，一方面要服務(wù)器同意，指定Access-Control-Allow-Credentials字段胖齐。另一方面玻淑，需要前端，在請(qǐng)求的時(shí)候設(shè)置withCredentials屬性呀伙，才能讓瀏覽器處理攜帶 cookie 發(fā)起請(qǐng)求补履。
注意：
如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設(shè)為星號(hào)剿另，必須指定明確的箫锤、與請(qǐng)求網(wǎng)頁(yè)一致的域名。同時(shí)雨女，Cookie依然遵循同源政策谚攒，只有用服務(wù)器域名設(shè)置的Cookie才會(huì)上傳，其他域名的Cookie并不會(huì)上傳氛堕，且（跨源）原網(wǎng)頁(yè)代碼中的document.cookie也無(wú)法讀取服務(wù)器域名下的Cookie馏臭。
4）非簡(jiǎn)單請(qǐng)求
-
預(yù)檢請(qǐng)求
非簡(jiǎn)單請(qǐng)求是那種對(duì)服務(wù)器有特殊要求的請(qǐng)求，比如請(qǐng)求方法是
PUT或DELETE讼稚，或者Content-Type字段的類(lèi)型是application/json括儒。非簡(jiǎn)單請(qǐng)求的CORS請(qǐng)求，會(huì)在正式通信之前锐想，增加一次HTTP查詢(xún)請(qǐng)求帮寻，稱(chēng)為"預(yù)檢"請(qǐng)求（preflight）。
瀏覽器先詢(xún)問(wèn)服務(wù)器赠摇，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中固逗，以及可以使用哪些HTTP動(dòng)詞和頭信息字段浅蚪。只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)出正式的
XMLHttpRequest請(qǐng)求抒蚜，否則就報(bào)錯(cuò)掘鄙。下面是一段瀏覽器的JavaScript腳本。
var url = 'http://api.alice.com/cors'; var xhr = new XMLHttpRequest(); xhr.open('PUT', url, true); xhr.setRequestHeader('X-Custom-Header', 'value'); xhr.send();上面代碼中嗡髓，HTTP請(qǐng)求的方法是
PUT，并且發(fā)送一個(gè)自定義頭信息X-Custom-Header收津。瀏覽器發(fā)現(xiàn)饿这，這是一個(gè)非簡(jiǎn)單請(qǐng)求，就自動(dòng)發(fā)出一個(gè)"預(yù)檢"請(qǐng)求撞秋，要求服務(wù)器確認(rèn)可以這樣請(qǐng)求长捧。下面是這個(gè)"預(yù)檢"請(qǐng)求的HTTP頭信息。
OPTIONS /cors HTTP/1.1 Origin: http://api.bob.com Access-Control-Request-Method: PUT Access-Control-Request-Headers: X-Custom-Header Host: api.alice.com Accept-Language: en-US Connection: keep-alive User-Agent: Mozilla/5.0..."預(yù)檢"請(qǐng)求用的請(qǐng)求方法是
OPTIONS吻贿，表示這個(gè)請(qǐng)求是用來(lái)詢(xún)問(wèn)的串结。頭信息里面，關(guān)鍵字段是Origin舅列，表示請(qǐng)求來(lái)自哪個(gè)源肌割。除了
Origin字段，"預(yù)檢"請(qǐng)求的頭信息包括兩個(gè)特殊字段帐要。- Access-Control-Request-Method
該字段是必須的把敞，用來(lái)列出瀏覽器的CORS請(qǐng)求會(huì)用到哪些HTTP方法，上例是
PUT榨惠。- Access-Control-Request-Headers
該字段是一個(gè)逗號(hào)分隔的字符串奋早，指定瀏覽器CORS請(qǐng)求會(huì)額外發(fā)送的頭信息字段，上例是
X-Custom-Header赠橙。 -
預(yù)檢請(qǐng)求的回應(yīng)(仍以上面的例子來(lái)說(shuō)明)
服務(wù)器收到"預(yù)檢"請(qǐng)求以后耽装，檢查了
Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后期揪，確認(rèn)允許跨源請(qǐng)求掉奄，就可以做出回應(yīng)。HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 01:15:39 GMT Server: Apache/2.0.61 (Unix) Access-Control-Allow-Origin: http://api.bob.com Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: X-Custom-Header Content-Type: text/html; charset=utf-8 Content-Encoding: gzip Content-Length: 0 Keep-Alive: timeout=2, max=100 Connection: Keep-Alive Content-Type: text/plain上面的HTTP回應(yīng)中横侦，關(guān)鍵的是
Access-Control-Allow-Origin字段挥萌，表示http://api.bob.com可以請(qǐng)求數(shù)據(jù)。該字段也可以設(shè)為星號(hào)(*)枉侧，表示同意任意跨源請(qǐng)求引瀑。注意的點(diǎn)在簡(jiǎn)單請(qǐng)求里有提到，這里類(lèi)似榨馁。Access-Control-Allow-Origin: *如果瀏覽器否定了"預(yù)檢"請(qǐng)求憨栽，會(huì)返回一個(gè)正常的HTTP回應(yīng)，但是沒(méi)有任何CORS相關(guān)的頭信息字段。這時(shí)屑柔，瀏覽器就會(huì)認(rèn)定屡萤，服務(wù)器不同意預(yù)檢請(qǐng)求，因此觸發(fā)一個(gè)錯(cuò)誤掸宛，被
XMLHttpRequest對(duì)象的onerror回調(diào)函數(shù)捕獲死陆。控制臺(tái)會(huì)打印出如下的報(bào)錯(cuò)信息唧瘾。XMLHttpRequest cannot load http://api.alice.com. Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.服務(wù)器回應(yīng)的其他CORS相關(guān)字段如下措译。
Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: X-Custom-Header Access-Control-Allow-Credentials: true Access-Control-Max-Age: 1728000- Access-Control-Allow-Methods
該字段必需，它的值是逗號(hào)分隔的一個(gè)字符串饰序，表明服務(wù)器支持的所有跨域請(qǐng)求的方法领虹。注意，返回的是所有支持的方法求豫，而不單是瀏覽器請(qǐng)求的那個(gè)方法塌衰。這是為了避免多次"預(yù)檢"請(qǐng)求。
- Access-Control-Allow-Headers
如果瀏覽器請(qǐng)求包括
Access-Control-Request-Headers字段蝠嘉，則Access-Control-Allow-Headers字段是必需的最疆。它也是一個(gè)逗號(hào)分隔的字符串，表明服務(wù)器支持的所有頭信息字段是晨，不限于瀏覽器在"預(yù)檢"中請(qǐng)求的字段肚菠。- Access-Control-Allow-Credentials
該字段與簡(jiǎn)單請(qǐng)求時(shí)的含義相同。
- Access-Control-Max-Age
該字段可選罩缴，用來(lái)指定本次預(yù)檢請(qǐng)求的有效期蚊逢，單位為秒。上面結(jié)果中箫章，有效期是20天（1728000秒）烙荷，即允許緩存該條回應(yīng)1728000秒（即20天），在此期間檬寂，不用發(fā)出另一條預(yù)檢請(qǐng)求终抽。
-
瀏覽器的正常請(qǐng)求和回應(yīng)
一旦服務(wù)器通過(guò)了"預(yù)檢"請(qǐng)求，以后每次瀏覽器正常的CORS請(qǐng)求桶至，就都跟簡(jiǎn)單請(qǐng)求一樣昼伴，會(huì)有一個(gè)
Origin頭信息字段。服務(wù)器的回應(yīng)镣屹，也都會(huì)有一個(gè)Access-Control-Allow-Origin頭信息字段圃郊。下面是"預(yù)檢"請(qǐng)求之后，瀏覽器的正常CORS請(qǐng)求女蜈。
PUT /cors HTTP/1.1 Origin: http://api.bob.com Host: api.alice.com X-Custom-Header: value Accept-Language: en-US Connection: keep-alive User-Agent: Mozilla/5.0...上面頭信息的
Origin字段是瀏覽器自動(dòng)添加的持舆。下面是服務(wù)器正常的回應(yīng)色瘩。
Access-Control-Allow-Origin: http://api.bob.com Content-Type: text/html; charset=utf-8上面頭信息中，
Access-Control-Allow-Origin字段是每次回應(yīng)都必定包含的逸寓。
2居兆、如何實(shí)現(xiàn) CORS
只需要在后臺(tái)中加上配置來(lái)允許跨域請(qǐng)求。如果還需要攜帶cookie在前端被請(qǐng)求的Response header中加入允許攜帶配置竹伸，就可以實(shí)現(xiàn)跨域訪(fǎng)問(wèn)了泥栖！
以下也是后臺(tái)小伙伴友情提供，這里再次感謝~(__) 嘻嘻……
下面我們來(lái)看一下 Java 的Tomcat 配置 cors:
首先需要下載 jar 包c(diǎn)ors-filter與java-property-utils：
<!-- https://mvnrepository.com/artifact/com.thetransactioncompany/cors-filter -->
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>2.5</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.thetransactioncompany/java-property-utils -->
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>java-property-utils</artifactId>
<version>1.10</version>
</dependency>
修改web.xml, 增加以下代碼（最好放在其他filter前邊）
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
jQuery請(qǐng)求示例:
$.ajax("url", {
type: "POST",
xhrFields: {
withCredentials: true,
useDefaultXhrHeader: false
},
data: {
type: "test"
},
dataType: 'json',
crossDomain: true,
success: function(data, status, xhr) {
console.log(data);
}
});
跨域請(qǐng)求默認(rèn)不會(huì)攜帶 cookie 信息佩伤，如果要攜帶請(qǐng)配置以下信息：
// 前端設(shè)置
“withCredentials”: true
Vue 框架 axios 配置：
axios.defaults.withCredentials = true
如果前端訪(fǎng)問(wèn)成功聊倔，則說(shuō)明后臺(tái)配置正確，反之生巡，說(shuō)明后臺(tái)配置失敗（前端可以無(wú)顧忌的甩鍋給后臺(tái)小伙伴见妒，hiahia~）孤荣。
3、 CORS 與 JSONP 的比較:
- jsonp只能實(shí)現(xiàn) GET 請(qǐng)求须揣，而cors支持所有類(lèi)型的http請(qǐng)求盐股；
- 使用cors，開(kāi)發(fā)者可以使用XMLHttpRequest發(fā)起請(qǐng)求和獲得響應(yīng)耻卡，可以有更好的錯(cuò)誤處理疯汁；
- jsonp 主要被老的瀏覽器支持，但它們往往不支持cors卵酪，而絕大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持了cors幌蚊。
4、CORS主要應(yīng)用場(chǎng)景：
- 比如后臺(tái)使用 restful API 架構(gòu)溃卡，前后臺(tái)不在同一服務(wù)器溢豆，需要用到。
三瘸羡、nginx 反向代理接口跨域
有反向代理漩仙，那就肯定有正向代理。我們先來(lái)簡(jiǎn)單說(shuō)說(shuō)這個(gè)正犹赖、反向代理是個(gè)啥队他。
1、正向代理原理
正向代理類(lèi)似一個(gè)跳板機(jī)峻村，把瀏覽器訪(fǎng)問(wèn)過(guò)程委托給代理去做麸折，代理訪(fǎng)問(wèn)外部資源。
舉個(gè)例子：
我是一個(gè)用戶(hù)雀哨，我訪(fǎng)問(wèn)不了某網(wǎng)站磕谅，但是我能訪(fǎng)問(wèn)一個(gè)代理服務(wù)器私爷，這個(gè)代理服務(wù)器能訪(fǎng)問(wèn)那個(gè)我不能訪(fǎng)問(wèn)的網(wǎng)站，于是我先連上代理服務(wù)器,告訴他我需要那個(gè)無(wú)法訪(fǎng)問(wèn)網(wǎng)站的內(nèi)容膊夹，代理服務(wù)器去取回來(lái),然后返回給我衬浑。從目標(biāo)網(wǎng)站的角度，只在代理服務(wù)器來(lái)取內(nèi)容的時(shí)候有一次記錄放刨，有時(shí)候并不知道是用戶(hù)的請(qǐng)求工秩，也隱藏了用戶(hù)的資料，這取決于代理告不告訴網(wǎng)站进统。
類(lèi)似場(chǎng)景比如我們?cè)谕饩W(wǎng)去訪(fǎng)問(wèn)公司內(nèi)網(wǎng)服務(wù)器B助币，我們先設(shè)置VPN，通過(guò)VPN將我們的請(qǐng)求轉(zhuǎn)發(fā)到內(nèi)網(wǎng)的A服務(wù)器螟碎，然后A把請(qǐng)求發(fā)到B上眉菱，響應(yīng)內(nèi)容返回到A，再由A通過(guò)VPN返回到我們掉分。
工作流程可以描述為：
用戶(hù)設(shè)置代理服務(wù)器俭缓，用戶(hù)訪(fǎng)問(wèn)url，代理服務(wù)器代替用戶(hù)訪(fǎng)問(wèn)并將網(wǎng)頁(yè)內(nèi)容返回酥郭。
2华坦、反向代理服務(wù)器工作原理
反向代理（Reverse Proxy）方式是指后臺(tái)內(nèi)部網(wǎng)絡(luò)服務(wù)器委托代理服務(wù)器，以代理服務(wù)器來(lái)接受Internet上的連接請(qǐng)求不从，然后將請(qǐng)求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器惜姐；并將從服務(wù)器上得到的結(jié)果返回給Internet上請(qǐng)求連接的客戶(hù)端，此時(shí)代理服務(wù)器對(duì)外就表現(xiàn)為一個(gè)服務(wù)器椿息。
用戶(hù)訪(fǎng)問(wèn)的是代理服務(wù)器歹袁，前端是不知道后臺(tái)真實(shí)地址，只知道代理地址撵颊。
再舉個(gè)栗子：
我是一個(gè)用戶(hù)宇攻，我可以訪(fǎng)問(wèn)某一個(gè)網(wǎng)站，網(wǎng)站的數(shù)據(jù)是來(lái)源于我訪(fǎng)問(wèn)不到的內(nèi)部網(wǎng)絡(luò)上的內(nèi)容服務(wù)器倡勇，內(nèi)容服務(wù)器設(shè)置了可以訪(fǎng)問(wèn)自己的代理服務(wù)器逞刷。于是我向目標(biāo)內(nèi)容服務(wù)器發(fā)起請(qǐng)求，其實(shí)我訪(fǎng)問(wèn)的是內(nèi)容服務(wù)器設(shè)置的代理服務(wù)器妻熊，這個(gè)代理服務(wù)器將我的請(qǐng)求轉(zhuǎn)發(fā)到目標(biāo)內(nèi)容服務(wù)器上夸浅，獲取到數(shù)據(jù)后再返回給網(wǎng)站上，我就可以看見(jiàn)了扔役。
工作流程可以描述為：
和正向代理相反帆喇，由目標(biāo)內(nèi)容服務(wù)器設(shè)置代理服務(wù)器，代理轉(zhuǎn)發(fā)用戶(hù)發(fā)起的請(qǐng)求亿胸，獲取數(shù)據(jù)再返回給用戶(hù)坯钦。
3预皇、使用 nginx 反向代理解決跨域
Nginx (engine x) 是一個(gè)高性能的HTTP和反向代理服務(wù)，也是一個(gè)IMAP/POP3/SMTP服務(wù)婉刀。
我們前面提到跨域是瀏覽器的同源策略導(dǎo)致的吟温，同源策略它是瀏覽器針對(duì)腳本攻擊采取的一種安全策略，并不是 HTTP 協(xié)議的一部分突颊。所以服務(wù)器端調(diào)用 HTTP 接口只是使用了 HTTP 協(xié)議鲁豪，是不會(huì)執(zhí)行 js 腳本的，不需要同源策略律秃，也就不會(huì)形成跨域問(wèn)題爬橡。
我們使用代理（同源）服務(wù)器發(fā)起請(qǐng)求，再由代理（同源）服務(wù)器請(qǐng)求內(nèi)部服務(wù)器棒动。
我們先來(lái)看看怎么來(lái)設(shè)置反向代理實(shí)現(xiàn)跨域請(qǐng)求糙申。
- 跨域舉例
假設(shè)有兩個(gè)網(wǎng)站，A網(wǎng)站部署在：http://localhost:81 即本地ip端口81上船惨；B網(wǎng)站部署在：http://localhost:82 即本地ip端口82上」Γ現(xiàn)在A網(wǎng)站的頁(yè)面想去訪(fǎng)問(wèn)B網(wǎng)站的信息，這時(shí)候?yàn)g覽器是會(huì)報(bào)錯(cuò)的掷漱，因?yàn)樾纬闪丝缬颉?br> 訪(fǎng)問(wèn)代碼：
<h2>Index</h2>
<div id="show"></div>
<script type="text/javascript">
$(function () {
$.get("http://localhost:82/api/values", {}, function (result) {
$("#show").html(result);
})
})
-
nginx 搭建
去官網(wǎng)下載 nginx，這個(gè)安裝例子是Windows系統(tǒng)下的榄檬，下完然后安裝卜范。解壓縮得到目錄如下：
nginx安裝包解壓縮目錄 配置 nginx.conf
打開(kāi)目錄中的 “conf” 文件夾下的“nginx.conf”。以下為未修改的配置文件片段：
# 服務(wù)器的集群
upstream rj.nginx.com { # 服務(wù)器集群名字
server 127.0.0.1:8001 weight=1;#服務(wù)器配置 weight是權(quán)重的意思鹿榜，權(quán)重越大海雪，分配的概率越大。
server 127.0.0.1:8002 weight=2;
}
# 當(dāng)前的Nginx的配置
server {
listen 80; #監(jiān)聽(tīng)80端口舱殿，可以改成其他端口
server_name localhost; # 當(dāng)前服務(wù)的域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://rj.nginx.com;
proxy_redirect default;
}
修改后代碼：
server {
listen 80; #監(jiān)聽(tīng)80端口奥裸，可以改成其他端口
server_name localhost; # 當(dāng)前服務(wù)的域名
#charset koi8-r;
#access_log logs/host.access.log main;
# 單一代理
location /apis { #添加訪(fǎng)問(wèn)目錄為/apis的代理配置
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://localhost:82;
}
# 以下配置省略
如果要實(shí)現(xiàn)前端跨域攜帶cookie的則在 location中另外配置：
# 當(dāng)用webpack-dev-server等中間件代理接口訪(fǎng)問(wèn)nignx時(shí)，此時(shí)無(wú)瀏覽器參與沪袭，故沒(méi)有同源限制湾宙，下面的跨域配置可不啟用
add_header Access-Control-Allow-Origin http://www.domain1.com; #當(dāng)前端只跨域不帶cookie時(shí)，可為*
add_header Access-Control-Allow-Credentials true;
如果是在瀏覽器中訪(fǎng)問(wèn)冈绊，項(xiàng)目訪(fǎng)問(wèn)地址需要和nginx代理同源侠鳄，可以在同一個(gè)站點(diǎn)或者對(duì)nginx實(shí)現(xiàn)cors相關(guān)配置。
修改代碼片段解析：
- 由配置信息可知死宣，我們讓nginx監(jiān)聽(tīng)localhost的80端口伟恶，網(wǎng)站A與網(wǎng)站B的訪(fǎng)問(wèn)都是經(jīng)過(guò)localhost的80端口進(jìn)行訪(fǎng)問(wèn)；
- 我們特殊配置了一個(gè)“/apis”目錄的訪(fǎng)問(wèn)毅该，并且對(duì)url執(zhí)行了重寫(xiě)博秫，最后使以“/apis”開(kāi)頭的地址（訪(fǎng)問(wèn)時(shí)的地址）都轉(zhuǎn)到“http://localhost:82”（目標(biāo)服務(wù)器地址）進(jìn)行處理潦牛；
- rewrite ^/apis/(.)
1 break;
rewrite代表重寫(xiě)攔截進(jìn)來(lái)的請(qǐng)求，并且只能對(duì)域名后邊以“/apis”開(kāi)頭的起作用挡育，例如www.a.com/apis/msg?x=1重寫(xiě)巴碗。只對(duì)/apis重寫(xiě)。
rewrite后面的參數(shù)是一個(gè)簡(jiǎn)單的正則 ^/apis/(.)1代表正則中的第一個(gè)(),$2代表第二個(gè)()的值,以此類(lèi)推静盅。
break代表匹配一個(gè)之后停止匹配良价。
- 訪(fǎng)問(wèn)地址修改
配置了nginx，那么所有的訪(fǎng)問(wèn)都要走nginx蒿叠，而不是走網(wǎng)站原本的地址（A網(wǎng)站localhost:81,B網(wǎng)站localhost:82）明垢。所以要修改A網(wǎng)站中的ajax訪(fǎng)問(wèn)地址，把訪(fǎng)問(wèn)地址由“ http://localhost:82/api/values” 改成 “/apis/api/values”
<h2>Index</h2>
<div id="show"></div>
<script type="text/javascript">
$(function () {
$.get("/apis/api/values", {}, function (result) {
$("#show").html(result);
})
})
</script>
然后在瀏覽器中訪(fǎng)問(wèn)B的數(shù)據(jù)就可以成功獲取了市咽。
四痊银、nodejs 中間件代理跨域
node中間件實(shí)現(xiàn)跨域代理，原理大致與nginx相同施绎，都是通過(guò)開(kāi)啟一個(gè)代理服務(wù)器（同源）溯革，實(shí)現(xiàn)數(shù)據(jù)的轉(zhuǎn)發(fā)。
由于我所試驗(yàn) nodejs 跨域的例子是已有的Vue項(xiàng)目谷醉，配置代理后實(shí)現(xiàn)了跨域獲取數(shù)據(jù)致稀，下面的例子分“非 Vue”和“Vue”兩種進(jìn)行說(shuō)明。
- 非 Vue 框架的跨域
利用node + express + http-proxy-middleware搭建一個(gè)proxy服務(wù)器俱尼。
- 安裝 node 環(huán)境抖单、 express、 http-proxy-middleware
express是基于 Node.js 平臺(tái)遇八，快速矛绘、開(kāi)放、極簡(jiǎn)的 web 開(kāi)發(fā)框架刃永。
http-proxy-middleware 是專(zhuān)門(mén)用于 http 代理的一個(gè) node 中間件货矮，適用于connect, express, browser-sync 等等，由熱門(mén)的http-proxy 驅(qū)動(dòng)斯够。
- 新建 js 文件： nodeProxy.js
"use strict";
const express = require('express');
const path = require('path');
const app = express();
const request = require('request');
// 配置靜態(tài)文件服務(wù)中間件
let serverUrl='http://192.168.1.220:8080'; // 目標(biāo)后端服務(wù)地址
app.use(express.static(path.join(__dirname, './'))); //靜態(tài)資源 index.html 和node代碼在一個(gè)目錄下
app.use('/', function(req, res) {
let url = serverUrl + req.url; // req.url 傳入的接口路徑
req.pipe(request(url)).pipe(res);
});
app.listen(3000,'127.0.0.1', function () {//前端 ajax 地址寫(xiě) http://127.0.0.1:3000/
console.log('server is running at port 3000'); // 3000為將要啟動(dòng)的端口
});
- 運(yùn)行 node nodeProxy.js
node 做代理轉(zhuǎn)發(fā)請(qǐng)求服務(wù)器囚玫，可以跨域請(qǐng)求數(shù)據(jù)。
- Vue 框架的跨域
利用node + webpack + webpack-dev-server代理接口跨域雳刺。在開(kāi)發(fā)環(huán)境下劫灶，由于vue渲染服務(wù)和接口代理服務(wù)都是webpack-dev-server同一個(gè)，所以頁(yè)面與代理接口之間不再跨域掖桦，無(wú)須設(shè)置headers跨域信息了本昏。
- 安裝中間件 http-proxy-middleware 和 express，已經(jīng)有的話(huà)就不必裝了枪汪。
使用命令：
npm install --save-dev express http-proxy-middleware
- webpack文件配置
我使用的vue-cli, webpack 版本為 3.8.1涌穆。
找到項(xiàng)目中config文件夾怔昨，然后打開(kāi)index.js, 看到如下片段，進(jìn)行配置:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/gxtz-server-web/': {
tartget: 'http://192.168.1.220',
changeOrigin: true,
pathRewrite: {'^/api/': '/'}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: '#source-map',
#其他省略
},
}
配置相關(guān)屬性含義和前面 nginx 中相同宿稀。這樣就可以進(jìn)行代理了趁舀。
五、WebSocket協(xié)議跨域
WebSocket protocol是HTML5一種新的協(xié)議祝沸。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信矮烹，同時(shí)允許跨域通訊，是server push技術(shù)的一種很好的實(shí)現(xiàn)罩锐。
原生WebSocket API使用起來(lái)不太方便奉狈，我們使用Socket.io，它很好地封裝了webSocket接口涩惑，提供了更簡(jiǎn)單仁期、靈活的接口，也對(duì)不支持webSocket的瀏覽器提供了向下兼容竭恬。
關(guān)于WebSocket我沒(méi)還沒(méi)有自己做實(shí)例去驗(yàn)證跨域跛蛋，但是WebSocket本身支持跨域，只要會(huì)使用就行痊硕，之前寫(xiě)小程序使用過(guò)赊级，但是代碼封裝程度高不適合作為例子看。以下例子是從前端常見(jiàn)跨域解決方案（全） 摘抄來(lái)的岔绸，可以參考一下此衅。
- 前端代碼:
<div>user input：<input type="text"></div>
<script src="./socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');
// 連接成功處理
socket.on('connect', function() {
// 監(jiān)聽(tīng)服務(wù)端消息
socket.on('message', function(msg) {
console.log('data from server: ---> ' + msg);
});
// 監(jiān)聽(tīng)服務(wù)端關(guān)閉
socket.on('disconnect', function() {
console.log('Server socket has closed.');
});
});
document.getElementsByTagName('input')[0].onblur = function() {
socket.send(this.value);
};
</script>
- Nodejs socket后臺(tái)：
var http = require('http');
var socket = require('socket.io');
// 啟http服務(wù)
var server = http.createServer(function(req, res) {
res.writeHead(200, {
'Content-type': 'text/html'
});
res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
// 監(jiān)聽(tīng)socket連接
socket.listen(server).on('connection', function(client) {
// 接收信息
client.on('message', function(msg) {
client.send('hello：' + msg);
console.log('data from client: ---> ' + msg);
});
// 斷開(kāi)處理
client.on('disconnect', function() {
console.log('Client socket has closed.');
});
});
結(jié)尾
簡(jiǎn)單的總結(jié)概括：
jsonp
適用于訪(fǎng)問(wèn)接口get請(qǐng)求返回值是json類(lèi)型，又是跨域的情況亭螟。
1）只支持 get 請(qǐng)求；
2）需要后端配合骑歹，能夠返回 callback 返回希望得到的數(shù)據(jù)预烙；
3）存在一定的安全性問(wèn)題，不能防止濫用跨域請(qǐng)求的非法網(wǎng)站惡意調(diào)用道媚。使用的話(huà)需做好安全防范扁掸；cors
由于CORS是W3C中一項(xiàng)較“新”的方案，目前最域，瀏覽器支持該功能(IE8+：IE8/9需要使用XDomainRequest對(duì)象來(lái)支持CORS）谴分，CORS也已經(jīng)成為主流的跨域解決方案。
1）純后端設(shè)置镀脂，無(wú)需前端做處理牺蹄，如果需要攜帶cookie，前后端都要配置薄翅，前端需要配置"withCredetails": "true;代理
1）nginx 反向代理沙兰，一般適用于外網(wǎng)訪(fǎng)問(wèn)不了的內(nèi)部網(wǎng)絡(luò)請(qǐng)求氓奈，做反向代理來(lái)獲取數(shù)據(jù)；
2）nodejs 中間件代理鼎天，前后端分離引起跨域問(wèn)題（從原理看nginx 反向代理應(yīng)該也適用）舀奶，開(kāi)發(fā)階段前后臺(tái)不同源的情況。
其他的沒(méi)有詳細(xì)描述斋射。在使用過(guò)程中就能夠知曉很明確的使用場(chǎng)景育勺，后續(xù)我再陸續(xù)補(bǔ)充。
參考鏈接
如果有沒(méi)理解的也可以去這里找找靈感~~
前端常見(jiàn)跨域解決方案（全）
jQuery jsonp跨域請(qǐng)求
cors跨域解析-阮一峰
關(guān)于 iframe 和 postMessage 跨域我沒(méi)有自己實(shí)踐罗岖，詳情請(qǐng)查閱：
瀏覽器同源政策及其規(guī)避方法-阮一峰
說(shuō)好的多端口配置：
Mac 自帶 Apache 多端口配置
【注解1】使用XMLHttpRequest (XHR)對(duì)象可以與服務(wù)器交互涧至。您可以從URL獲取數(shù)據(jù)，而無(wú)需讓整個(gè)的頁(yè)面刷新呀闻。這使得Web頁(yè)面可以只更新頁(yè)面的局部化借，而不影響用戶(hù)的操作。
盡管名稱(chēng)如此捡多，XMLHttpRequest可以用于獲取任何類(lèi)型的數(shù)據(jù)蓖康，而不僅僅是XML，它還支持 HTTP以外的協(xié)議(包括文件和ftp)垒手。
【注解2】
result = callback + "(" +result+")"; // 綁定前端傳入回調(diào)函數(shù)
response.getWriter().write(result); // 后臺(tái)將數(shù)據(jù)作為響應(yīng)帶回蒜焊。不加這一句前端指定的callback對(duì)應(yīng)函數(shù)能拿到數(shù)據(jù)，但是ajax請(qǐng)求success中是獲取不到數(shù)據(jù)的科贬。
對(duì)于更詳細(xì)的XMLHttpRequest請(qǐng)求內(nèi)容可以參考：使用XMLHttpRequest
