WEB跨域請(qǐng)求-創(chuàng)新互聯(lián)

web開(kāi)發(fā)隨著ajax的出來(lái)帶來(lái)了革命性的變化，它改變了web的數(shù)據(jù)加載方式讓交互更友好，網(wǎng)絡(luò)資源更節(jié)省。但最初ajax考慮安全性并沒(méi)有開(kāi)放跨域請(qǐng)求，隨著H5的到來(lái)ajax開(kāi)放了跨域請(qǐng)求，所以ajax跨域請(qǐng)求存在兼容性，不過(guò)現(xiàn)在的瀏覽器大部分都已經(jīng)支持了。

創(chuàng)新互聯(lián)公司專(zhuān)注于麗江企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),成都做商城網(wǎng)站。麗江網(wǎng)站建設(shè)公司,為麗江等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站制作，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

常用跨域請(qǐng)求手段有：

  1. jsonp

  2. FORM到頁(yè)面框架

  3. HTTP服務(wù)器代理

  4. 服務(wù)器腳本轉(zhuǎn)發(fā)

  5. ajax

  6. WebSocket

  7. 插件

jsonp

這種方式是早期在ajax不支持跨域請(qǐng)求時(shí)的一種替代方案應(yīng)用非常多，在JQuery類(lèi)的早期框架都集成了此功能。期原理就是通過(guò)HTML的<script>標(biāo)簽加載一個(gè)跨域的請(qǐng)求地址并指定一個(gè)隨機(jī)回調(diào)函數(shù)，所連接的服務(wù)器返回指定的回調(diào)函數(shù)并增加參數(shù)，標(biāo)簽加載完后會(huì)自動(dòng)執(zhí)行代碼來(lái)完成請(qǐng)求回調(diào)，因此jsonp只支持GET請(qǐng)求方式，并且需要服務(wù)器作專(zhuān)用處理，典型的示例如：

前端代碼：(域名www.a.cn請(qǐng)求域名www.b.cn)

(function?(global)?{
????//發(fā)送請(qǐng)求
????function?request(url,?data,?callback)?{
????????function?jsonpcall(_data,?error)?{
????????????callback(_data,?error);
????????????//清理
????????????delete?global[data['jsonpcallback']];
????????????document.body.removeChild(script);
????????}
????????data?=?data?||?{};
????????//生成全局回調(diào)函數(shù)
????????data['jsonpcallback']?=?'jsonp_'?+?String(Math.random()).substr(2,?10);
????????global[data['jsonpcallback']]?=?jsonpcall;
????????var?params?=?getParamsString(data);
????????var?script?=?document.createElement('script');
????????script.type?=?'text/javascript';
????????script.src?=?url?+?(url.indexOf('?')?>=?0???'&'?:?'?')?+?params;
????????script.onerror?=?function?(event)?{
????????????jsonpcall(null,?event);
????????};
????????document.body.appendChild(script);
????}
????//轉(zhuǎn)換請(qǐng)求參數(shù)
????function?getParamsString(data,?prefix)?{
????????var?arr?=?[];
????????prefix?=?prefix?||?'';
????????for?(var?key?in?data)?{
????????????var?name?=?'';
????????????if?(!prefix)?{
????????????????name?=?key;
????????????}?else?{
????????????????name?=?prefix?+?'['?+?key?+?']';
????????????}
????????????if?(typeof?data[key]?===?'object')?{
????????????????arr.push(getParamsString(data[key],?name));
????????????}?else?{
????????????????arr.push(name?+?'='?+?data[key]);
????????????}
????????}
????????return?arr.join('&');
????}
????global.jsonp?=?request;
})(window);
//發(fā)起請(qǐng)求
jsonp('http://www.b.cn',?{id:?12},?function?()?{
????console.info(arguments);
});

服務(wù)端代碼：(域名www.b.cn，以PHP為例)

<?php
if?(empty($_GET['jsonpcallback']))?{
????header('HTTP/1.1?404?Not?Found');
????die();
}
//查數(shù)據(jù)，返回結(jié)果
$data?=?[
????'status'?=>?'ok',
????'msg'?=>?'操作成功'
];
//輸出結(jié)果
echo?$_GET['jsonpcallback']?.?'('?.?json_encode($data,?JSON_UNESCAPED_UNICODE)?.?');';

這種方式請(qǐng)求不受跨域限制使用方便，兼容性好，非常適用小數(shù)據(jù)量跨域請(qǐng)求。缺點(diǎn)是只支持GET請(qǐng)求無(wú)法完成像上傳文件或其它請(qǐng)求方式的操作，服務(wù)器響應(yīng)結(jié)果專(zhuān)用性強(qiáng)。

FORM到頁(yè)面框架

這種方式在異步上傳文件使用非常多，通常是iframe+form結(jié)合通過(guò)form的target屬性指定到iframe的name完成異步請(qǐng)求，但iframe有部分移動(dòng)端存瀏覽器不支持，另外還有一個(gè)frameset標(biāo)簽在H5中已經(jīng)不支持。

使用這種方式跨域請(qǐng)求兼容性?xún)H僅在PC端較好而且服務(wù)端不需要作額外處理，但移動(dòng)端上使用需要留意用戶(hù)平臺(tái)是否都支持。典型的示例如：

//?請(qǐng)求處理
function?request(form,?callback)?{
????var?iframe?=?document.createElement('iframe'),?name?=?'IFRAME-'?+?String(Math.random()).replace('.',?''),?submit?=?1;
????iframe.name?=?name,?form.target?=?name;
????iframe.onload?=?function?()?{
????????//初次加載
????????if?(submit?===?1)?{
????????????form.submit();
????????}?else?if?(submit?===?2)?{
????????????try?{
????????????????var?json?=?JSON.parse((iframe.contentDocument?||?iframe.contentWindow.document).body.innerHTML);
????????????????callback(json);
????????????}?catch?(err)?{
????????????????callback(null,?err);
????????????}
????????????document.body.removeChild(iframe);
????????}
????????submit++;
????};
????iframe.onerror?=?function?(event)?{
????????callback(null,?event);
????????document.body.removeChild(iframe);
????};
????//不能顯示標(biāo)簽
????iframe.style.display?=?'none';
????document.body.appendChild(iframe);
}

//發(fā)送請(qǐng)求
request(document.forms[0],?function(){
????console.info(arguments);
});

這種方式間接完成跨域操作，同時(shí)對(duì)服務(wù)端的代碼沒(méi)有額外要求，只需要返回一個(gè)通用的json串即可，通過(guò)這個(gè)方式可以完成GET與POST請(qǐng)求并且還可以上傳文件，大的缺點(diǎn)是有少部分瀏覽器不支持。

HTTP服務(wù)器代理

這種方式從理論上說(shuō)不需要開(kāi)發(fā)額外的代碼只需要在HTTP服務(wù)器上配置代理轉(zhuǎn)發(fā)即可以滿(mǎn)足所有請(qǐng)求的跨域請(qǐng)求，但會(huì)額外增加服務(wù)器性能開(kāi)銷(xiāo)，不適合于跨域請(qǐng)求過(guò)多的場(chǎng)景，畢竟服務(wù)器的資源是有限的。一般使用這種方式的基本上是小項(xiàng)目，大項(xiàng)目這么玩在硬件上開(kāi)銷(xiāo)不容忽視。以nginx為例，典型的配置代碼有：（僅以server塊為例）

????location?/proxy?{
??????????#?resolver?114.114.114.114?223.5.5.5?valid=3600s;
??????????proxy_pass?http://www.b.com:8099/;
????}

nginx的proxy_pass做代理配置很容易，配置靈活。

  • 如果在proxy_pass中指定了詳細(xì)地址則只轉(zhuǎn)發(fā)到對(duì)應(yīng)的地址

  • 如果沒(méi)有指定地址則把當(dāng)前的地址追加到域名下

  • 如果需要指定DNS解析地址則可以增加resolver命令，但一定要保證DNS服務(wù)器正常，否則請(qǐng)求會(huì)卡住

  • 轉(zhuǎn)發(fā)可以使用IP地址和域名，如果有特定端口一定要追加上

  • 域名可以使用變量來(lái)傳入，例如：set $proxy_host "http://www.b.com:8099/";? proxy_pass $proxy_host;

  • 可以指定路徑，也可以通過(guò)if來(lái)判斷

nginx配置代理調(diào)試比較麻煩需要多注意兩個(gè)日志文件。對(duì)于配置要考慮：

  • 是否被截取即沒(méi)有進(jìn)入代理塊

  • 代理域名端口協(xié)議是否正確

  • 域名或地址是否能正常訪問(wèn)

服務(wù)器腳本轉(zhuǎn)發(fā)

這種方式是通過(guò)服務(wù)器的腳本來(lái)轉(zhuǎn)發(fā)，避開(kāi)前端跨域請(qǐng)求，開(kāi)發(fā)方便，對(duì)于配置HTTP服務(wù)器有限制或問(wèn)題時(shí)是一個(gè)比較簡(jiǎn)單的替代方案。本質(zhì)與HTTP服務(wù)器代理類(lèi)似，都是通過(guò)服務(wù)器來(lái)轉(zhuǎn)來(lái)，不可避免增加服務(wù)器的開(kāi)銷(xiāo)。這種處理方式唯一的好處是開(kāi)發(fā)調(diào)試容易，兼容性好。以PHP為例，典型的示例代碼如：

$url?=?$_GET['_url_'];
$input?=?file_get_contents('php://input');
$curl?=?curl_init();
curl_setopt_array($curl,?[
????CURLOPT_HTTP_VERSION?=>?CURL_HTTP_VERSION_1_1,
????CURLOPT_USERAGENT?=>?'Mozilla/5.0?(Windows?NT?10.0;?WOW64)?AppleWebKit/537.36?(KHTML,?like?Gecko)?Chrome/41.0.2272.118?Safari/537.36',
????CURLOPT_CONNECTTIMEOUT?=>?10,
????CURLOPT_TIMEOUT?=>?30,
????CURLOPT_RETURNTRANSFER?=>?true,
????CURLOPT_SSL_VERIFYPEER?=>?FALSE,?//?不驗(yàn)證證書(shū)
????CURLOPT_SSL_VERIFYHOST?=>?FALSE,?//?不驗(yàn)證域名
]);
if?($_SERVER['REQUEST_METHOD']?==?'POST')?{
????curl_setopt($curl,?CURLOPT_POST,?true);
????curl_setopt($curl,?CURLOPT_POSTFIELDS,?$input);
????curl_setopt($curl,?CURLOPT_URL,?$url);
}?else?{
????unset($_GET['_url_']);
????$params?=?http_build_query($_GET);
????curl_setopt($curl,?CURLOPT_URL,?$url?.?(strpos($url,?'?')???'&'?:?'?')?.?$params);
}
$response?=?curl_exec($curl);
$httpCode?=?curl_getinfo($curl,?CURLINFO_HTTP_CODE);
curl_close($curl);
header('HTTP/1.1?'?.?$httpCode);
echo?$response;

代碼中簡(jiǎn)單的示例通過(guò)curl發(fā)起跨域請(qǐng)求，前端只需要指定需要請(qǐng)求的跨域地址和參數(shù)即可完成請(qǐng)求操作，由于請(qǐng)求類(lèi)型多樣化，所以使用代碼轉(zhuǎn)發(fā)要做到兼容所有請(qǐng)求形式則需要做較多的處理，一般用不上。

ajax

ajax支持跨域可以說(shuō)可以非常理想，遺憾的時(shí)推出的晚，不過(guò)現(xiàn)在隨著瀏覽器全面支持H5使得ajax跨域請(qǐng)求變得普及起來(lái)，如果應(yīng)用平臺(tái)涉及比較老的瀏覽器則需要留意了。官方文檔：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS?在官方文檔中有比較詳細(xì)的說(shuō)明。

其實(shí)從本質(zhì)上說(shuō)跨域限制只是瀏覽器出于安全考慮的一個(gè)限制，而開(kāi)放這個(gè)限制也需要合理安全，否則會(huì)造成比較多的跨域請(qǐng)求漏洞，因此瀏覽器對(duì)ajax跨域請(qǐng)求作了一些限制，它必需要服務(wù)器返回允許跨域響應(yīng)頭信息，才正常提供響應(yīng)結(jié)果，所以ajax跨域請(qǐng)求需要服務(wù)端額外增加響應(yīng)頭信息。

ajax跨域請(qǐng)求分為兩種場(chǎng)景：基本請(qǐng)求，預(yù)檢請(qǐng)求；并且XMLHttpRequest內(nèi)部通過(guò)指定條件強(qiáng)制判斷識(shí)別并作出相應(yīng)的操作，其中預(yù)檢請(qǐng)求會(huì)觸發(fā)CORS預(yù)檢，CORS預(yù)檢會(huì)把請(qǐng)求類(lèi)型強(qiáng)制修改為OPTIONS類(lèi)型向服務(wù)器發(fā)起跨域請(qǐng)求檢查服務(wù)器是否響應(yīng)允許跨域請(qǐng)求頭信息如果允許則再次發(fā)起指定的請(qǐng)求類(lèi)型跨域請(qǐng)求并把響應(yīng)內(nèi)容注入到ajax響應(yīng)內(nèi)容中，而基本請(qǐng)求是直接發(fā)起指定請(qǐng)求類(lèi)型的跨域請(qǐng)求。兩種請(qǐng)求場(chǎng)景均需要跨域服務(wù)器返回允許跨域響應(yīng)頭信息，響應(yīng)狀態(tài)等頭信息不會(huì)受影響。

常規(guī)請(qǐng)求

這種場(chǎng)景瀏覽器會(huì)直接發(fā)起請(qǐng)求，當(dāng)響應(yīng)頭信息內(nèi)容中不包含Access-Control-Allow-Origin允許頭信息時(shí)會(huì)丟棄響應(yīng)內(nèi)容并向控制臺(tái)發(fā)出Failed to load警告信息，提示服務(wù)器沒(méi)有Access-Control-Allow-Origin響應(yīng)頭信息請(qǐng)求不被允許。

條件：(需全部滿(mǎn)足)

  • 請(qǐng)求類(lèi)型為 GET、HEAD、POST

  • 僅設(shè)置過(guò)Accept、Accept-Language、Content-Language、Content-Type、DPR、Downlink、Save-Data、Viewport-Width、Width頭信息，或使用默認(rèn)的不設(shè)置頭信息

  • Content-Type只能設(shè)置為application/x-www-form-urlencoded、multipart/form-data、text/plain，或者不設(shè)置

  • 在請(qǐng)求中沒(méi)有使用過(guò)XMLHttpRequestUpload事件監(jiān)聽(tīng)。XMLHttpRequestUpload是通過(guò)XMLHttpRequest對(duì)象的upload屬性獲取的一個(gè)上傳進(jìn)度對(duì)象，可以獲取上傳進(jìn)度數(shù)據(jù)。

  • 請(qǐng)求中沒(méi)有使用ReadableStream對(duì)象。ReadableStream大部分瀏覽器還不支持，是一個(gè)獲取響應(yīng)二進(jìn)度流的對(duì)象處理器。

示例代碼：（只在不觸犯以上任何一個(gè)條件即可）

(function?(global)?{
????function?request(url,?callback,?data,?method)?{
????????var?xmlHttp?=?new?XMLHttpRequest();
????????var?params?=?getParamsString(data?||?{});
????????method?=?method?||?'GET';
????????if?(method.toUpperCase()?===?'POST')?{
????????????xmlHttp.open(method,?url,?true);
????????????xmlHttp.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded;');
????????????xmlHttp.send(params);
????????}?else?{
????????????xmlHttp.open(method,?url?+?(url.indexOf('?')?>=?0???'&'?:?'?')?+?params,?true);
????????????xmlHttp.send(null);
????????}
????????xmlHttp.onreadystatechange?=?function?()?{
????????????if?(xmlHttp.readyState?==?4)?{
????????????????try?{
????????????????????if?(xmlHttp.status?==?200)?{
????????????????????????var?json?=?JSON.parse(xmlHttp.responseText);
????????????????????????callback(json);
????????????????????}?else?{
????????????????????????callback(null,?xmlHttp.responseText);
????????????????????}
????????????????}?catch?(err)?{
????????????????????callback(null,?err);
????????????????}
????????????}
????????};
????}
????//轉(zhuǎn)換請(qǐng)求參數(shù)
????function?getParamsString(data,?prefix)?{
????????var?arr?=?[];
????????prefix?=?prefix?||?'';
????????for?(var?key?in?data)?{
????????????var?name?=?'';
????????????if?(!prefix)?{
????????????????name?=?key;
????????????}?else?{
????????????????name?=?prefix?+?'['?+?key?+?']';
????????????}
????????????if?(typeof?data[key]?===?'object')?{
????????????????arr.push(getParamsString(data[key],?name));
????????????}?else?{
????????????????arr.push(name?+?'='?+?data[key]);
????????????}
????????}
????????return?arr.join('&');
????}
????global.ajax?=?request;
})(window);
//發(fā)起請(qǐng)求
ajax('https://www.b.cn/',?function?()?{
????console.info(arguments);
});

預(yù)檢請(qǐng)求

這種場(chǎng)景請(qǐng)求瀏覽器會(huì)強(qiáng)制把請(qǐng)求類(lèi)型改為OPTIONS類(lèi)型發(fā)起預(yù)檢跨域請(qǐng)求，當(dāng)響應(yīng)頭信息內(nèi)容中不包含Access-Control-Allow-Origin允許頭信息時(shí)會(huì)丟棄響應(yīng)內(nèi)容并向控制臺(tái)發(fā)出Failed to load警告信息，提示服務(wù)器沒(méi)有Access-Control-Allow-Origin響應(yīng)頭信息請(qǐng)求不被允許；如果響應(yīng)頭信息全部允許跨域請(qǐng)求則瀏覽器會(huì)再次發(fā)送指定請(qǐng)求類(lèi)型的跨域請(qǐng)求到服務(wù)器并獲取本次響應(yīng)內(nèi)容注入到ajax的響應(yīng)內(nèi)容中。

條件：（任意條滿(mǎn)足）

  • 請(qǐng)求類(lèi)型指定為：PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH

  • 設(shè)置了Accept、Accept-Language、Content-Language、Content-Type、DPR、Downlink、Save-Data、Viewport-Width、Width之外的頭信息

  • 設(shè)置Content-Type是為application/x-www-form-urlencoded、multipart/form-data、text/plain之外的類(lèi)型

  • 在請(qǐng)求中使用過(guò)XMLHttpRequestUpload事件監(jiān)聽(tīng)

  • 請(qǐng)求中使用ReadableStream對(duì)象

示例代碼：（強(qiáng)制增加一個(gè)特殊頭信息即可）

(function?(global)?{
????function?request(url,?callback,?data,?method)?{
????????var?xmlHttp?=?new?XMLHttpRequest();
????????var?params?=?getParamsString(data?||?{});
????????method?=?method?||?'GET';
????????if?(method.toUpperCase()?===?'POST')?{
????????????xmlHttp.open(method,?url,?true);
????????????xmlHttp.setRequestHeader('Ajax-Request',?'1');
????????????xmlHttp.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded;');
????????????xmlHttp.send(params);
????????}?else?{
????????????xmlHttp.open(method,?url?+?(url.indexOf('?')?>=?0???'&'?:?'?')?+?params,?true);
????????????xmlHttp.setRequestHeader('Ajax-Request',?'1');
????????????xmlHttp.setRequestHeader('Content-Type',?'text/html');
????????????xmlHttp.send(null);
????????}
????????xmlHttp.onreadystatechange?=?function?()?{
????????????if?(xmlHttp.readyState?==?4)?{
????????????????try?{
????????????????????if?(xmlHttp.status?==?200)?{
????????????????????????var?json?=?JSON.parse(xmlHttp.responseText);
????????????????????????callback(json);
????????????????????}?else?{
????????????????????????callback(null,?xmlHttp.responseText);
????????????????????}
????????????????}?catch?(err)?{
????????????????????callback(null,?err);
????????????????}
????????????}
????????};
????}
????//轉(zhuǎn)換請(qǐng)求參數(shù)
????function?getParamsString(data,?prefix)?{
????????var?arr?=?[];
????????prefix?=?prefix?||?'';
????????for?(var?key?in?data)?{
????????????var?name?=?'';
????????????if?(!prefix)?{
????????????????name?=?key;
????????????}?else?{
????????????????name?=?prefix?+?'['?+?key?+?']';
????????????}
????????????if?(typeof?data[key]?===?'object')?{
????????????????arr.push(getParamsString(data[key],?name));
????????????}?else?{
????????????????arr.push(name?+?'='?+?data[key]);
????????????}
????????}
????????return?arr.join('&');
????}
????global.ajax?=?request;
})(window);
//發(fā)起請(qǐng)求
ajax('https://www.b.cn/',?function?()?{
????console.info(arguments);
});

攜帶請(qǐng)求資源

在跨域請(qǐng)求時(shí)還允許攜帶請(qǐng)求資源如cookie，但必需設(shè)置XMLHttpRequest對(duì)象的withCredentials屬性為true，如：

xmlHttp.withCredentials?=?true;

攜帶的請(qǐng)求資源受，響應(yīng)頭信息Access-Control-Allow-Origin、Access-Control-Allow-Credentials兩個(gè)影響，Access-Control-Allow-Origin必需指定為當(dāng)前請(qǐng)求的域名，Access-Control-Allow-Credentials必需設(shè)置為true否則跨域請(qǐng)求攜帶資源失敗即服務(wù)器返回的cookie不會(huì)被記錄?？缬蛘?qǐng)求只受Access-Control-Allow-Origin影響，只要Access-Control-Allow-Origin允許當(dāng)前域名則請(qǐng)求可以正常獲取響應(yīng)結(jié)果。

注意：如果設(shè)置這個(gè)值，Access-Control-Allow-Origin指定為通配符有兼容問(wèn)題，需要設(shè)置為對(duì)應(yīng)的域名集。

跨域請(qǐng)求響應(yīng)頭信息

這些頭信息由服務(wù)器響應(yīng)，瀏覽器內(nèi)核判斷并作相應(yīng)處理。這些頭信息是預(yù)定好的，只需要按規(guī)則響應(yīng)返回給瀏覽即可完成跨域請(qǐng)求。瀏覽器對(duì)這些頭信息處理略有差異，不建議設(shè)計(jì)的太隨意畢竟安全還是比較重要的。

Access-Control-Allow-Origin

該頭信息是跨域請(qǐng)求中必需響應(yīng)的，它用來(lái)標(biāo)識(shí)服務(wù)器允許哪些請(qǐng)求來(lái)源域名共享數(shù)據(jù)，一般如果沒(méi)有特別要求最好設(shè)置為指定的開(kāi)放域名。如果允許任意域名使用*通配符。如果是指定一個(gè)域名并且每次請(qǐng)求該響應(yīng)頭均會(huì)變化則需要增加Vary: Origin頭信息來(lái)禁止瀏覽器的緩存。

Access-Control-Expose-Headers

該頭信息允許暴露給外部的頭信息，默認(rèn)只可以暴露服務(wù)器響應(yīng)Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma頭信息。如果想讓腳本通過(guò)XMLHttpRequest對(duì)象的getAllResponseHeaders()函數(shù)訪問(wèn)到其它頭信息則可以在這里設(shè)置，多個(gè)以逗號(hào)分開(kāi)也可以使用通配符*。注意預(yù)檢請(qǐng)求中詢(xún)問(wèn)成功后才有效。

Access-Control-Max-Age

該狀信息用于預(yù)檢請(qǐng)求中Access-Control-Allow-Methods、Access-Control-Allow-Headers信息可以緩存多久，單位為秒，每個(gè)瀏覽器中大秒數(shù)有限制，火狐中大86400秒，谷歌中600秒，如果需要禁用緩存響應(yīng)返回-1即可。

Access-Control-Allow-Credentials

該頭信息是允許跨域請(qǐng)求中攜帶請(qǐng)求資源主要是cookie。只要在XMLHttpRequest對(duì)象中設(shè)置withCredentials=true同時(shí)Access-Control-Allow-Origin為當(dāng)前請(qǐng)求的域名，Access-Control-Allow-Credentials為true（字符串）即可攜帶資源請(qǐng)求。

Access-Control-Allow-Methods

該頭信息是允許跨域請(qǐng)求類(lèi)型集，可以設(shè)置為指定的請(qǐng)求類(lèi)型如：GET、POST、PUT、DELETE等，也可以設(shè)置為*通配符允許所有請(qǐng)求類(lèi)型，默認(rèn)不設(shè)置即允許所有請(qǐng)求。該頭信息僅在預(yù)檢請(qǐng)求中有效，標(biāo)準(zhǔn)要求是當(dāng)發(fā)送OPTIONS請(qǐng)求時(shí)如果響應(yīng)中允許當(dāng)前指定請(qǐng)求類(lèi)型時(shí)會(huì)自動(dòng)再發(fā)起一次指定的請(qǐng)求類(lèi)型請(qǐng)求并對(duì)XMLHttpRequest對(duì)象作出回調(diào)，目前各瀏覽器實(shí)現(xiàn)并不統(tǒng)一，有的瀏覽器此參數(shù)無(wú)效。

Access-Control-Allow-Headers

該頭信息用于開(kāi)放額外發(fā)送給服務(wù)器的頭信息，默認(rèn)必定允許Accept、Accept-Language、Content-Language、Content-Type等常規(guī)允許頭信息設(shè)置，當(dāng)指定其它頭信息時(shí)瀏覽器啟動(dòng)預(yù)檢請(qǐng)求詢(xún)問(wèn)服務(wù)器是否允許額外的這些頭信息設(shè)置，如果允許則再發(fā)送常規(guī)請(qǐng)求。開(kāi)放的頭信息多個(gè)以逗號(hào)分開(kāi)也可以使用通配符*（通配符有兼容問(wèn)題）。如果頭信息不能匹配允許則請(qǐng)求終止不再發(fā)起常規(guī)請(qǐng)求并且XMLHttpRequest獲取響應(yīng)失敗代碼無(wú)法獲取服務(wù)器的響應(yīng)內(nèi)容（有兼容性問(wèn)題部分瀏覽器還是可以獲取服務(wù)器響應(yīng)內(nèi)容）。

跨域禁止修改請(qǐng)求頭信息

這些請(qǐng)求頭信息在跨域請(qǐng)求時(shí)瀏覽器禁止代碼修改。在非跨域請(qǐng)求則允許修改。

Origin

標(biāo)記請(qǐng)求來(lái)源站點(diǎn)。

Access-Control-Request-Method

用于通知服務(wù)器真實(shí)的請(qǐng)求類(lèi)型。

Access-Control-Request-Headers

用于通知服務(wù)器請(qǐng)求頭字段集，多個(gè)以逗號(hào)分開(kāi)或使用通配符*

兼容性

跨域請(qǐng)求是新開(kāi)放的特性在兼容性方面差異比較多，一般推薦使用常規(guī)請(qǐng)求會(huì)更理想，使用預(yù)檢模式下很多代碼或服務(wù)器均未對(duì)OPTIONS請(qǐng)求類(lèi)型提供支持導(dǎo)致請(qǐng)求失敗。對(duì)于瀏覽器內(nèi)核兼容性可查看：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Browser_compatibility

WebSocket

WebSocket是web引入的全新技術(shù)，讓web端也能實(shí)現(xiàn)長(zhǎng)連接，目前兼容性?https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7?。websocket允許跨域連接并且不需要額外處理，因?yàn)槭情L(zhǎng)連接，所以web服務(wù)器需要額外調(diào)整為長(zhǎng)連接才能與終端通信。websocket連接操作簡(jiǎn)單，但服務(wù)器端需要轉(zhuǎn)換處理方式，一般應(yīng)用與游戲、直播類(lèi)項(xiàng)目較多。

兼容性

WebSocket請(qǐng)求是專(zhuān)門(mén)為H5設(shè)計(jì)的，目前支付H5的瀏覽器均支持。在部分瀏覽器中https與http頁(yè)面中使用ws與wss有安全限制，要求https只能連接wss，而http的可以使用ws和wss。

一般在https頁(yè)面中最好使用wss協(xié)議連接，如果服務(wù)端不支持wss可以通過(guò)nginx進(jìn)行轉(zhuǎn)發(fā)把ws改為wss。

插件

增加插件可以擴(kuò)展web功能。插件不受瀏覽器過(guò)多的限制，在跨域請(qǐng)求中可以很好的發(fā)輝。缺點(diǎn)是插件的開(kāi)發(fā)形式不統(tǒng)一，兼容性也不一樣，目前比較多的是flash，但flash自身的問(wèn)題已經(jīng)將慢慢進(jìn)入歷史舞臺(tái)了。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱(chēng)：WEB跨域請(qǐng)求-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址：http://muchs.cn/article28/dhigcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、小程序開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、App設(shè)計(jì)、關(guān)鍵詞優(yōu)化、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)