node+cookie前後端通訊

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。