在做vue全家桶+express 做項目。 想做一個免登陸功能,選擇session方案。 服務器設置session 后, 返回的響應頭有Set-Cookie,但是瀏覽器的Application的cookies缺沒有返回的sessionID的cookie。 折騰了很久,才意識到這是跨域造成了問題。前端是8080端口,后端是4000端口。 默認情況下跨域請求瀏覽器不會攜帶憑證信息(cookie, ssl證明等),服務器設置的cookie也會被瀏覽器攔截
所以解決方案是
前端的ajax后者axios需要設置withCredentials為true。我的是axios,這樣請求會攜帶上cookie
同時后端使用cors中間件。 即可
//需要安裝並且引入中間件cors const cors = require('cors'); var corsOptions = { origin: 'http://localhost:8080', credentials: true, maxAge: '1728000' //這一項是為了跨域專門設置的 } app.use(cors(corsOptions)) //設置跨域
如果不用中間件,也可以這樣,顯示的設置
Access-Control-Allow-Credentials 為true
注意origin不能是*號.。 這樣瀏覽器就不會攔截服務器設置的cookie了
1 app.all('*', function(req, res, next) { 2 res.header("Access-Control-Allow-Origin", req.headers.origin); //需要顯示設置來源 3 res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 4 res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); 5 res.header("Access-Control-Allow-Credentials",true); //帶cookies7 res.header("Content-Type", "application/json;charset=utf-8"); 8 next(); 9 });