20、express跨域配置，session處理，vue---asiox跨域處理cookie

一、express跨域配置

app.js

//設置跨域請求
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  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();
});

二、session處理

var cookieSession = require("cookie-session");
var keys = [];
for(var i = 0; i < 10000; i++){
	keys.push("sessionid"+Math.random());
}

app.use(cookieSession({
	name:"sessionId",
	keys,
	maxAge:30*60*1000 //ms
}))

三、存儲cookie

后台此為注冊驗證碼接口

npm i -S svg-captcha

const svgCaptcha = require('svg-captcha');
router.get('/getCode',(req,res)=>{
  var codeConfig = {
    size: 5,// 驗證碼長度
    ignoreChars: '0o1i', // 驗證碼字符中排除 0o1i
    noise: 2, // 干擾線條的數量
    color: true,
    background: '#cc9966',
    height: 40,
    width: 100
  }
  const captcha = svgCaptcha.createMathExpr(codeConfig);
  req.session.captcha = captcha.text.toLocaleLowerCase(); // session 存儲
  res.type('svg'); // 響應的類型
  res.send(captcha.data);
});

使用時直接req.session.captcha

前端 vue項目 axios請求

withCredentials設置為true，可以在單個請求設置，也可全局設置。
設置為true，本地才會存儲，接口請求頭才會帶cookie

全局：axios.defaults.withCredentials = true

瀏覽器的cookie是HttpOnly,不能被js讀取。

注 withCredentials設置為true請求頭設置cookie，響應頭存儲cookie，可以跨域。但后台，res.header("Access-Control-Allow-Origin", " * "); 不能用'*',需用固定的地址

后台express設置下

1、動態設置Access-Control-Allow-Origin

let originHeader=req.headers.origin;
res.header("Access-Control-Allow-Origin", originHeader);

2、Access-Control-Allow-Credentials設為true

res.header("Access-Control-Allow-Credentials", true);

代碼如下

//設置跨域請求
app.all('*', function (req, res, next) {
  let originHeader=req.headers.origin;
  res.header("Access-Control-Allow-Origin", originHeader);
  // res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  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");
  res.header("Access-Control-Allow-Credentials", true);
  next();
});

這樣就可以了