Vue+NodeJS的跨域請求如何保存session

今天一直在練習如何使用Vue蘑险,就把自己之前用node寫的個人博客改改萨螺,拿來當接口纵搁,涉及到跨域請求的問題吃衅,接下來簡單的說下自己所遇到的問題,和解決方法腾誉。


一. 用cors來實現(xiàn)跨域請求:

一想到跨域請求徘层,腦子里首先出現(xiàn)的是jsonp,但是jsonp只能是get請求利职,在向后臺提交數(shù)據(jù)時顯然用get是不合適的趣效,所以選擇用cors,用cors時后臺要實現(xiàn)相關的配置猪贪,如下:

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

//設置跨域訪問  
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();  
});  

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

二. 如何來存session?

因為我用的是vue-resource插件,所以在每次跨域請求后臺時都是一個新的session鬼廓,那么如何來保存我們的session呢肿仑?當然是要打開cookie了,這樣才能保證每次的session都不是新的碎税。

了解cors的都知道尤慰,在后臺如果要允許提交cookie的話,要設置:Access-Control-Allow-Credentials:true雷蹂,這樣后端才會接收前端發(fā)來的cookie伟端,所以將后臺的跨域請求設置改一下就行了:

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

當然只允許后臺接收cookie是不夠的匪煌,必須得有人發(fā)送cookie啊责蝠,所以前端的請求頭信息也是要變的党巾,加上: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);
      });
    }

就這樣簡單的設置一下就可以了霜医,這也是第一次對cors的應用齿拂,希望對初學的你也有幫助!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末肴敛,一起剝皮案震驚了整個濱河市署海,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌医男,老刑警劉巖砸狞,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異镀梭,居然都是意外死亡刀森,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進店門丰辣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人禽捆,你說我怎么就攤上這事笙什。” “怎么了胚想?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵琐凭,是天一觀的道長。 經(jīng)常有香客問我浊服,道長统屈,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任牙躺,我火速辦了婚禮愁憔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘孽拷。我一直安慰自己吨掌,他們只是感情好,可當我...
    茶點故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布脓恕。 她就那樣靜靜地躺著膜宋,像睡著了一般。 火紅的嫁衣襯著肌膚如雪炼幔。 梳的紋絲不亂的頭發(fā)上秋茫,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天,我揣著相機與錄音乃秀,去河邊找鬼肛著。 笑死圆兵,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的策泣。 我是一名探鬼主播衙傀,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼萨咕!你這毒婦竟也來了统抬?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤危队,失蹤者是張志新(化名)和其女友劉穎聪建,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體茫陆,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡金麸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了簿盅。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挥下。...
    茶點故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖桨醋,靈堂內(nèi)的尸體忽然破棺而出棚瘟,到底是詐尸還是另有隱情,我是刑警寧澤喜最,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布偎蘸,位于F島的核電站,受9級特大地震影響瞬内,放射性物質(zhì)發(fā)生泄漏迷雪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一虫蝶、第九天 我趴在偏房一處隱蔽的房頂上張望章咧。 院中可真熱鬧,春花似錦能真、人聲如沸慧邮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽误澳。三九已至,卻和暖如春秦躯,著一層夾襖步出監(jiān)牢的瞬間忆谓,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工踱承, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留倡缠,地道東北人哨免。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像昙沦,于是被迫代替她去往敵國和親琢唾。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,914評論 2 355

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

  • 前言:對于跨域請求盾饮,很早之前就有去了解過采桃,但因為一直關注的都是服務器后端開發(fā),故也就僅僅停留在概念的理解上而沒有機...
    ken_ljq閱讀 89,766評論 6 128
  • 什么是跨域丘损? 2.) 資源嵌入:普办、、徘钥、等dom標簽衔蹲,還有樣式中background:url()、@font-fac...
    電影里的夢i閱讀 2,372評論 0 5
  • 瀏覽器在請求不同域的資源時,會因為同源策略的影響請求不成功而钞,這就是通常被提到的“跨域問題”沙廉。作為前端開發(fā),解決跨域...
    SCQ000閱讀 2,554評論 1 52
  • 2014賽季笨忌,大連阿爾濱隊中超聯(lián)賽排名倒數(shù)第二蓝仲,確定降級俱病。從大連萬達官疲、大連實德,再到大連阿爾濱亮隙,大連足球第一次從中...
    帥氣的大腳兒閱讀 162評論 0 0
  • 每個人身上都有一種東西途凫,感覺它被束縛住,有時候你想掙脫溢吻,卻沒有辦法维费。 生活就像是一個牢籠,有時候?qū)⑷私d地喘不過氣...
    鐺妹閱讀 1,386評論 0 0