前端跨域新方案嘗試

自從前后端開發(fā)實現(xiàn)了越來越徹底的分離厚骗,開發(fā)中遇到的跨域問題也隨之越來越多痛黎;
而無論是跨域請求JSONP狸相,CORS或者window跨域window.name桩匪,window.postMessage怕篷,在實際開發(fā)使用中的表現(xiàn)都不夠完美历筝。
相對來說 CORS 是官方的功能比較完善的方案,但除了需要服務(wù)器和瀏覽器雙方同時支持外廊谓,還有很多限制梳猪,比如Access-Control-Allow-Origin:*不能發(fā)送cookie等,而且如果服務(wù)器設(shè)置不當也存在著一些安全隱患蒸痹。

當然春弥,我寫這篇的重點不是吐槽,而且解決問題的叠荠。
更多關(guān)于跨域的資料請自行查閱匿沛,相關(guān)內(nèi)容

《瀏覽器的同源策略》
《跨域資源共享 CORS 詳解》
《 深入理解前端跨域方法和原理》

<h4 id="design"> 設(shè)計</h4>
我并不是一個前端開發(fā),在之前的很長時間里我都在做著后端開發(fā)的工作榛鼎;
一個偶然的機會接觸到了angularJS的前端路由逃呼,當時我就想到了一個點子——做一個index.html頁面,這個頁面只有一段js腳本者娱,腳本的功能是將另外一個存放于靜態(tài)存儲服務(wù)器的html頁面整個拉過來抡笼,寫到當前頁面中

舉個栗子

比如我有一個服務(wù)器是這樣的:
api服務(wù)站點:www.xxx.com
靜態(tài)存儲服務(wù):static.xxx.com
登錄頁面:static.xxx.com/20170420/login.html (中間的數(shù)字表示版本肺然,下面會講到)
登錄接口:www.xxx.com/api/user/login

index.html

很顯然蔫缸,在登錄頁面調(diào)用登錄接口是一個跨域的行為;
所以我現(xiàn)在在www.xxx.com中放一個index.html頁面
內(nèi)容如下:

<script src="http://static.xxx.com/config.js"></script>
<script>
    (function (url) {
        if (/[?&]supportreload\b/i.test(location.search)) {
            window.loadPage = arguments.callee;
        }
        if (url) {
            var xhr = window.XMLHttpRequest ? 
                       new XMLHttpRequest() : 
                       new ActiveXObject('Microsoft.XMLHTTP');
            url += [(url.indexOf("?") < 0 ? "?" : "&"), "_", new Date().getTime()].join("");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        var base = ['<base href="', url, '" />'].join("");
                        var html = xhr.responseText;
                        html = html.replace(/(\<head[^>]*\>)/, "$1" + base);
                        if (html === xhr.responseText) {
                            html = base + html;
                        }
                        document.open();
                        document.write(html);
                        document.close();
                    } else {
                        document.write("'" + url + "' 加載失敗(" + xhr.statusText + ")...");
                    }
                }
            }
            xhr.open("GET", url, true);
            xhr.send(null);
        }
    })(window["index.page"]);
</script>

其中引入了一個//static.xxx.com/config.js际起,內(nèi)容如下:

window["index.page"] = "http://static.xxx.com/20170420/login.html"

流程

流程大致是這樣的


可以看到拾碌,在index.html頁面被加載的同時吐葱,我引用了一個config.js,這個js也是存放在靜態(tài)資源服務(wù)器的校翔,里面聲明了一個參數(shù)window["index.page"]弟跑,而index.html頁面會用這個變量中聲明的url拉取頁面,并write到當前頁面中防症。

發(fā)布版本控制

可以看到導(dǎo)入的頁面是"http://static.xxx.com/20170420/login.html"孟辑,中間的數(shù)字可以看做是版本,前端每次發(fā)布都可以創(chuàng)建一個新的文件夾蔫敲,保留之前的發(fā)布內(nèi)容饲嗽,如果遇到問題需要回滾之類的操作,只需要將config.js中的window["index.page"]指向新的版本頁面即可奈嘿;

頁內(nèi)資源

另外頁面中的css貌虾,js等資源的問題,我在load page操作的時候會在頁面中加入<base >標簽裙犹,保證大部分的相對引用資源都是沒問題的(js代碼中的地址不受base影響尽狠,如ajax);

本地調(diào)試

為了方便本地調(diào)試叶圃,特別加了這一段

if (/[?&]supportreload\b/i.test(location.search)) {
    window.loadPage = arguments.callee;
}

當訪問 “www.xxx.com/index.html?supportreload”的時候袄膏,會注冊一個全局方法window.loadPage,可以load本地調(diào)試頁面掺冠,如:

window.loadPage("localhost:8080/login.html");

頁面跳轉(zhuǎn)

目前頁面跳轉(zhuǎn)有2個方案:

  1. 前端處理

前端使用angularjs的路由方式沉馆,使用hash切換頁面,首頁永遠不變赫舒;
這種方式對前端有一定要求悍及,后端代碼不需要任何修改闽瓢;

  1. 后端處理

后端使用url重寫功能接癌,將一個固定路徑的所有子路徑全部映射到index.html,如:

config.Routes.MapHttpRoute(
        name: "webhtml",
        routeTemplate: "web/{*pattern}",
        defaults: new { controller = "webhtml", action = "index" }
);

前端使用相對路徑的方式切換頁面扣讼,config.js部分代碼做一些簡單的調(diào)整缺猛;
如:

window["index.page"] = "http://static.xxx.com/20170420" +  location.pathname

現(xiàn)在就可以動態(tài)拉取頁面了,比如訪問
www.xxx.com/web/login.html的時候椭符,會拉取并展示"//static.xxx.com/20170420/login.html"
www.xxx.com/web/user/manager/info.html的時候荔燎,會拉取并展示"//static.xxx.com/20170420/user/manager/info.html"


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市销钝,隨后出現(xiàn)的幾起案子有咨,更是在濱河造成了極大的恐慌,老刑警劉巖蒸健,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件座享,死亡現(xiàn)場離奇詭異婉商,居然都是意外死亡,警方通過查閱死者的電腦和手機渣叛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門丈秩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人淳衙,你說我怎么就攤上這事蘑秽。” “怎么了箫攀?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵肠牲,是天一觀的道長。 經(jīng)常有香客問我靴跛,道長埂材,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任汤求,我火速辦了婚禮俏险,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘扬绪。我一直安慰自己竖独,他們只是感情好,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布挤牛。 她就那樣靜靜地躺著莹痢,像睡著了一般。 火紅的嫁衣襯著肌膚如雪墓赴。 梳的紋絲不亂的頭發(fā)上竞膳,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天,我揣著相機與錄音诫硕,去河邊找鬼坦辟。 笑死,一個胖子當著我的面吹牛章办,可吹牛的內(nèi)容都是我干的锉走。 我是一名探鬼主播,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼藕届,長吁一口氣:“原來是場噩夢啊……” “哼挪蹭!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起休偶,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤梁厉,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后踏兜,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體词顾,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡只冻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了计技。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片喜德。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖垮媒,靈堂內(nèi)的尸體忽然破棺而出舍悯,到底是詐尸還是另有隱情,我是刑警寧澤睡雇,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布萌衬,位于F島的核電站,受9級特大地震影響它抱,放射性物質(zhì)發(fā)生泄漏秕豫。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一观蓄、第九天 我趴在偏房一處隱蔽的房頂上張望混移。 院中可真熱鬧,春花似錦侮穿、人聲如沸歌径。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽回铛。三九已至,卻和暖如春克锣,著一層夾襖步出監(jiān)牢的瞬間茵肃,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工袭祟, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留验残,地道東北人。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓榕酒,卻偏偏與公主長得像胚膊,于是被迫代替她去往敵國和親故俐。 傳聞我的和親對象是個殘疾皇子想鹰,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 什么是跨域? 2.) 資源嵌入:药版、辑舷、、等dom標簽槽片,還有樣式中background:url()何缓、@font-fac...
    電影里的夢i閱讀 2,377評論 0 5
  • 前些日子從@張鑫旭微博處得一份推薦(Front-end-tutorial)肢础,號稱最全的資源教程-前端涉及的所有知識...
    谷子多閱讀 4,203評論 0 44
  • 大部分的后端會很很鄙視前端。我也不知道為什么碌廓,可能大部分人都會覺得腳本語言根本不算語言传轰。 大多人 會叫我們切圖仔,...
    小黑的眼閱讀 3,344評論 0 15
  • 1. 昨天晚上我刷朋友圈的時候,看到一個同學(xué)過生日纪挎。我立馬發(fā)了個紅包給她期贫,祝她生日快樂。 同學(xué)很驚訝异袄,一開始并沒有...
    然歲閱讀 33,191評論 862 1,997
  • 吾日一释场:這一段時間店里水果多了起來,生意也比以前有所好轉(zhuǎn)烤蜕,這是多虧了老婆回來管理封孙。以前我老婆在家里的時候老喜歡往...
    e4901c10da8b閱讀 260評論 0 1