node+cookie前後端通訊

Zswsown發表於2020-09-29
  1. cookie是由伺服器編寫,儲存在客戶端的一個小型文字檔案。它會自動儲存在客戶端的瀏覽器中,並在使用者下次向伺服器請求時,自動新增在請求頭中,一起傳送給伺服器。
  2. 前端程式碼(注意這裡是在vue檔案中的程式碼):
    (1)建立一個登入表單,用於提交登入資訊。
<form id="loginForm" action="http://localhost:3000/login" method="post" @submit.prevent="loginCheck">
            <div class="loginForm">
                <div class="loginFormData">
                    <p><input class="code" type="text" v-model="code" id="code" placeholder="請輸入賬號"  required="required"></p>
                    <p><input class="password" type="password" v-model="password" id="password" placeholder="請輸入密碼"  required="required"></p>
                </div>
                <div class="loginFormFooter">
<!--                    <p><input type="submit" class="loginbutton" value="登入"></p>-->
                    <button class="loginbutton">登入</button>
                </div>
            </div>
        </form>

(2)loginCheck()登入驗證方法程式碼(這裡的$axios()請求方法其實是對axios的簡單封裝):

import axios from 'axios';
export function $axios(config){
  return axios(config);
}
 loginCheck(){
        $axios({
          method:'post',
          url:BASE_URL+api.LOGIN_CHECK,
          data:{
            code:this.code,
            password:this.password
          },
          //非常重要,如果沒加的話,cookie不會儲存在瀏覽器,不會生效,因為localhost的預設埠是8080,訪問的BASE_URL是3000埠,涉及跨域了,所以要允許它在跨域時攜帶cookie
          withCredentials:true,
        }).then(res=>{

          console.log(res.data.cookie);
        })
        return false;
      },

(3)BASE_URL是一個常量,程式碼如下:
在這裡插入圖片描述
3.後端程式碼(使用的是node):
(1)使用express外掛,利用new構造出一個web服務
(2)使用cookie-parser外掛,用來建立並處理cookie
(3)因為涉及到跨域,所以可以使用CORS跨域資源共享的方法來解決該問題,在響應頭上新增相應的處理
注意:
1)在前面的axios中我們設定了withCredentials:true,在伺服器端也要允許其攜帶cookie,所以在res的頭部新增Access-Control-Allow-Credentials:ture
2)Access-Control-Allow-Origin後面的引數不可為"*",要指定相應的域名,因為前面已經指定是跨域攜帶cookie了,若設定Access-Control-Allow-Origin:" * "和 withCredentials:true時,會報錯。

解釋:
如果後端介面需要前端攜帶cookie的情況下,withCredentials的值必須為true,這個時候如果有跨域問題,後端設定的時候不能設定為 * ,可以設定專案的根域名;如果不需要前端攜帶cookie的時候,後端可以設定為* ,前端只需要把withCredentials的值設定為false即可

const express=require('express');
const cookieParser=require('cookie-parser');
const app=express();

app.use(cookieParser());//使用該外掛

//設定跨域請求
app.all('*',(req,res,next)=>{
	res.header('Access-Control-Allow-Origin','http://localhost:8080');
	//注意這裡的X-Requested-With要加,表明這個請求是非同步請求
	res.header('Access-Control-Allow-Headers','Content-Type, Content-Length, Authorization, Accept, X-Requested-With, yourHeaderFeild');
	//允許跨域攜帶cookie
	res.header('Access-Control-Allow-Credentials','true');
	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()方法,讓上面的設定生效
	next();
})

app.post('/api/loginCheck',(req,res)=>{
	//注意:res.cookie
	res.cookie("username","zswsown",{maxAge:5000});
})


4.之後我們點選提交後可以在瀏覽器本地儲存的cookies中看到服務端返回的儲存在瀏覽器的cookie。
在這裡插入圖片描述

相關文章