資訊專欄INFORMATION COLUMN
摘要：但是隨著互聯(lián)網(wǎng)的發(fā)展，同源策略嚴(yán)重影響了項(xiàng)目之間的連接尤其是大項(xiàng)目，有幾個(gè)域名需要進(jìn)行溝通的，標(biāo)準(zhǔn)推出了跨來(lái)源資源共享。
同源策略相信各位同學(xué)已然不陌生了，在這里不做過(guò)多闡述，簡(jiǎn)單介紹一下就好：
| URL | 說(shuō)明 | 是否允許 |
|---|---|---|
| http://www.a.com/a.js?/ http://www.a.com/b.js | 同一域名下 | 允許 |
| http://www.a.com/lab/a.js / http://www.a.com/script/b.js | 同一域名下不同文件夾 | 允許 |
| http://www.a.com:8000/a.js?http://www.a.com/b.js | 同一域名，不同端口 | 不允許 |
| http://www.a.com/a.js?https://www.a.com/b.js | 同一域名，不同協(xié)議 | 不允許 |
| http://www.a.com/a.js?http://70.32.92.74/b.js | 域名和域名對(duì)應(yīng)ip | 不允許 |
| http://www.a.com/a.js?http://script.a.com/b.js | 主域相同，子域不同 | 不允許 |
| http://www.a.com/a.js?http://a.com/b.js | 同一域名，不同二級(jí)域名（同上） | 不允許（cookie這種情況下也不允許訪問(wèn)） |
| http://www.cnblogs.com/a.js?http://www.a.com/b.js | 不同域名 | 不允許 |
以上表格系統(tǒng)的闡述了如何算是跨域。
那么下面我們
今天我們著重講講對(duì)抗同源策略的方法：
CORS——Cross-origin resource sharing（跨來(lái)源資源共享）
由于HTML 5的概念形成，在原有XHR的基礎(chǔ)上提出了XMLHttpRequest Level2(XHR2)，在XHR2中對(duì)CORS有了很好的支持。（除了遠(yuǎn)古的IE8,IE9這些老古董）
我們先看看看CORS日常是怎么實(shí)現(xiàn)跨域的
? ?isset($_POST["name"])??$_POST["name"]?:?"",??
? ????"gender"?=>?isset($_POST["gender"])??$_POST["gender"]?:?""??
? );??
? ??
? //HTTP_ORIGIN是請(qǐng)求頭中的信息，在瀏覽器中直接展示為Origin
? $origin?=?isset($_SERVER["HTTP_ORIGIN"])??$_SERVER["HTTP_ORIGIN"]?:?"";??
? //此處是允許跨域的白名單
? $allow_origin?=?array(??
? ????"http://www.client.com",??
? ????"http://www.client2.com"??
? );??
? //判斷當(dāng)前Origin來(lái)源是否在白名單內(nèi)，是的話就允許設(shè)置一套三式Header頭讓他跨域??
? if(in_array($origin,?$allow_origin)){?
? //關(guān)鍵點(diǎn)是這里的一套三式?
? ????header("Access-Control-Allow-Origin:".$origin);??//允許的域名
? ????header("Access-Control-Allow-Methods:POST");??//允許的方法
? ????header("Access-Control-Allow-Headers:x-requested-with,content-type");??//服務(wù)器支持的頭信息
? }??
? ??
? echo?json_encode($ret);??
? ?>?
關(guān)鍵詞在header("Access-Control-Allow-*"：) 一套三件，不同如果無(wú)法通過(guò)這一套三件的洗禮，那么就報(bào)類似下面這樣的錯(cuò)：
XMLHttpRequest cannot load http://b.com. No "Access-Control-Allow-Origin" header is present on the requested resource. Origin "http://a.com" is therefore not allowed access.
這個(gè)就是瀏覽器同源策略造成的，如果我們沒(méi)有設(shè)置Header頭三件套的話（"Access-Control-Allow-*"：）那么對(duì)一切跨域請(qǐng)求操作瀏覽器都是拒絕的~。
但是隨著互聯(lián)網(wǎng)的發(fā)展，同源策略嚴(yán)重影響了項(xiàng)目之間的連接（尤其是大項(xiàng)目，有幾個(gè)域名需要進(jìn)行溝通的），W3C標(biāo)準(zhǔn)推出了“跨來(lái)源資源共享——CORS”。
回到前面的那段實(shí)例代碼，我們來(lái)分析分析 請(qǐng)求-》處理-》返回 一套流程的來(lái)龍去脈。
CORS的背后基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請(qǐng)求響應(yīng)是應(yīng)該成功還是應(yīng)該失敗。
當(dāng)Http請(qǐng)求發(fā)起（可以通過(guò)更新操作去測(cè)試POST，或者用JavaScript請(qǐng)求測(cè)試GET）的時(shí)候（不分跨不跨域）會(huì)類似帶著以下請(qǐng)求頭信息：
Origin:http://www.csdnblog.com
返回頭也會(huì)夾帶著類似如下信息：
Access-Control-Allow-Credentials:true Access-Control-Allow-Origin:http://www.csdnblog.com
一來(lái)一回的請(qǐng)求決定的請(qǐng)求決定了改請(qǐng)求是否會(huì)被瀏覽器通過(guò)，如果返回頭中沒(méi)有這個(gè)頭部，或者有頭部但是源信息不匹配（就是說(shuō)返回頭%-Allow-Origin中沒(méi)有當(dāng)前請(qǐng)求站點(diǎn)的域名），那么瀏覽器就會(huì)幫我們駁回這次請(qǐng)求，同源策略在這里發(fā)揮了作用。
通過(guò)這一來(lái)一回我們不難發(fā)現(xiàn)其實(shí)瀏覽器判斷是否駁回的標(biāo)準(zhǔn)就是返回頭中是否有 Access-Control-Allow-% 這個(gè)信息，并且判斷這個(gè)信息是否合法（即這個(gè)信息是否是與請(qǐng)求頭中的Origin對(duì)應(yīng)的上），對(duì)應(yīng)的上就通過(guò)，對(duì)應(yīng)不上就駁回。
既然搞懂這個(gè)我們就可以理解為何通過(guò)CORS設(shè)置兩三行Header代碼既可以輕松跨域了吧？
服務(wù)端代碼設(shè)置Header返回頭告訴瀏覽器“誰(shuí)誰(shuí)誰(shuí)是允許訪問(wèn)我的，你看到這家伙就給我放行吧~“。
所以如果在服務(wù)端代碼中設(shè)置：
header("Access-Control-Allow-Origin:*")
是的，這樣的話任何域名都可以請(qǐng)求你的服務(wù)器了，當(dāng)然這樣子你的服務(wù)器也就非常危險(xiǎn)了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/11213.html
摘要：在中，在不同的域名下面進(jìn)行數(shù)據(jù)交互，就會(huì)遇到跨域問(wèn)題，說(shuō)到跨域首先要從同源說(shuō)起，瀏覽器為了提供一種安全的運(yùn)行環(huán)境，各個(gè)瀏覽器廠商協(xié)定使用同源策略。在上面說(shuō)過(guò)是不受同源策略限制的，但是出于安全原因，瀏覽器限制從腳本內(nèi)發(fā)起的跨源請(qǐng)求。 對(duì)于前端開發(fā)來(lái)說(shuō)跨域應(yīng)該是最不陌生的問(wèn)題了，無(wú)論是開發(fā)過(guò)程中還是在面試過(guò)程中都是一個(gè)經(jīng)常遇到的一個(gè)問(wèn)題，在開發(fā)過(guò)程中遇到這個(gè)問(wèn)題的話一般都是找后端同學(xué)去解決...
摘要：關(guān)于，強(qiáng)烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個(gè)實(shí)現(xiàn)原理圖簡(jiǎn)化版如何判斷是否是簡(jiǎn)單請(qǐng)求瀏覽器將請(qǐng)求分成兩類簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求。 前言 從剛接觸前端開發(fā)起，跨域這個(gè)詞就一直以很高的頻率在身邊重復(fù)出現(xiàn)，一直到現(xiàn)在，已經(jīng)調(diào)試過(guò)N個(gè)跨域相關(guān)的問(wèn)題了，16年時(shí)也整理過(guò)一篇相關(guān)文章，但是感覺(jué)還是差了點(diǎn)什么，于是現(xiàn)在重新梳理了一下。 個(gè)人見識(shí)有限，如有差錯(cuò)，請(qǐng)多多見諒，歡迎提出iss...
摘要：在接觸前端開發(fā)起，跨域這個(gè)詞就一直以很高的頻率在我們學(xué)習(xí)工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問(wèn)題，這里我把它總結(jié)記錄一下。 在接觸前端開發(fā)起，跨域這個(gè)詞就一直以很高的頻率在我們學(xué)習(xí)工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問(wèn)題，這里我把它總結(jié)記錄一下。關(guān)于跨域，有N種類型，現(xiàn)在我只專注于ajax請(qǐng)求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹)，內(nèi)容...
閱讀 3396·2023-04-25 17:19
閱讀 700·2021-11-23 09:51
閱讀 1407·2021-11-08 13:19
閱讀 855·2021-09-29 09:34
閱讀 1754·2021-09-28 09:36
閱讀 1547·2021-09-22 14:59
閱讀 2776·2019-08-29 16:38
閱讀 2107·2019-08-26 13:40
