Vue+NodeJS的跨域請(qǐng)求如何保存session

今天一直在練習(xí)如何使用Vue,就把自己之前用node寫的個(gè)人博客改改,拿來當(dāng)接口,涉及到跨域請(qǐng)求的問題,接下來簡(jiǎn)單的說下自己所遇到的問題,和解決方法。


一. 用cors來實(shí)現(xiàn)跨域請(qǐng)求:

一想到跨域請(qǐng)求,腦子里首先出現(xiàn)的是jsonp,但是jsonp只能是get請(qǐng)求,在向后臺(tái)提交數(shù)據(jù)時(shí)顯然用get是不合適的,所以選擇用cors,用cors時(shí)后臺(tái)要實(shí)現(xiàn)相關(guān)的配置,如下:

var app = express();  //express框架

//設(shè)置跨域訪問  
app.all('*', function(req, res, next) {  
    res.header('Access-Control-Allow-Origin', "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");  
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    res.header("X-Powered-By",' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");  
    next();  
});  

上面的設(shè)置就不一一解釋了,我想根據(jù)每個(gè)字段的值,應(yīng)該都知道是干什么的,特別強(qiáng)調(diào)下:res.header('Access-Control-Allow-Origin', "*");,這樣設(shè)置允許所有的域,如果將*號(hào)改為指定的域,則表明只允許特定的域。

二. 如何來存session?

因?yàn)槲矣玫氖?code>vue-resource插件,所以在每次跨域請(qǐng)求后臺(tái)時(shí)都是一個(gè)新的session,那么如何來保存我們的session呢?當(dāng)然是要打開cookie了,這樣才能保證每次的session都不是新的。

了解cors的都知道,在后臺(tái)如果要允許提交cookie的話,要設(shè)置:Access-Control-Allow-Credentials:true,這樣后端才會(huì)接收前端發(fā)來的cookie,所以將后臺(tái)的跨域請(qǐng)求設(shè)置改一下就行了:

//將外源設(shè)為指定的域,比如:http://localhost:8080
res.header('Access-Control-Allow-Origin', "http://localhost:8080");
//將Access-Control-Allow-Credentials設(shè)為true
res.header('Access-Control-Allow-Credentials', true); 
    

當(dāng)然只允許后臺(tái)接收cookie是不夠的,必須得有人發(fā)送cookie啊,所以前端的請(qǐng)求頭信息也是要變的,加上:withCredentials: true就可以了。

以用戶登錄為例:

    submit: function (){
      this.$http.post(this.url, {
        username: this.username, 
        userpass: this.userpass
      },{ 
        withCredentials: true  //打開cookie
      }).then( res => {
        console.log(res);
        if (res.body.result == 'ok'){
          this.$router.push({path: '/home'});
        }
      }).catch( error => {
        console.log(error);
      });
    }

就這樣簡(jiǎn)單的設(shè)置一下就可以了,這也是第一次對(duì)cors的應(yīng)用,希望對(duì)初學(xué)的你也有幫助!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,156評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,401評(píng)論 3 415
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,069評(píng)論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,873評(píng)論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,635評(píng)論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,128評(píng)論 1 323
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,203評(píng)論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,365評(píng)論 0 288
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,881評(píng)論 1 334
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,733評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,935評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,475評(píng)論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,172評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,582評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,821評(píng)論 1 282
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,595評(píng)論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,908評(píng)論 2 372

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

  • 前言:對(duì)于跨域請(qǐng)求,很早之前就有去了解過,但因?yàn)橐恢标P(guān)注的都是服務(wù)器后端開發(fā),故也就僅僅停留在概念的理解上而沒有機(jī)...
    ken_ljq閱讀 89,821評(píng)論 6 128
  • 什么是跨域? 2.) 資源嵌入:、、、等dom標(biāo)簽,還有樣式中background:url()、@font-fac...
    電影里的夢(mèng)i閱讀 2,381評(píng)論 0 5
  • 瀏覽器在請(qǐng)求不同域的資源時(shí),會(huì)因?yàn)橥床呗缘挠绊懻?qǐng)求不成功,這就是通常被提到的“跨域問題”。作為前端開發(fā),解決跨域...
    SCQ000閱讀 2,571評(píng)論 1 52
  • 2014賽季,大連阿爾濱隊(duì)中超聯(lián)賽排名倒數(shù)第二,確定降級(jí)。從大連萬達(dá)、大連實(shí)德,再到大連阿爾濱,大連足球第一次從中...
    帥氣的大腳兒閱讀 171評(píng)論 0 0
  • 每個(gè)人身上都有一種東西,感覺它被束縛住,有時(shí)候你想掙脫,卻沒有辦法。 生活就像是一個(gè)牢籠,有時(shí)候?qū)⑷私d地喘不過氣...
    鐺妹閱讀 1,398評(píng)論 0 0