2018-12-19

axios+node请求解决session的问题

当前后端分离利用axios请求后端存储的session时，会在页面导航丢失session值。解决办法如下：

1. 教程地址：https://www.jb51.net/article/118555.htm

2. 后端跨域请求中需要设置（红色感叹号的两句）：

   // 处理跨域方法 jsonp  CROS 处理方式
   app.all('*', function (req, res, next) {
       res.header('Access-Control-Allow-Credentials', "true");❗️
       res.header("Access-Control-Allow-Origin", "http://127.0.0.1:5500");❗️
       res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
       res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
       res.header("X-Powered-By", ' 3.2.1');
       next();
   });
   

3. vsc编辑器安装内置服务

   在编辑器器中安装插件Live Serve。

4. 在axios请求数据时添加（红色❗️部分）

   mounted() {
        axios.get("http://localhost:3000/vue/username", {
            withCredentials: true //打开cookie❗️
        }).then(res => {
            const username = res.data;
            console.log(username);
            if (username) {
                this.username = res.data;
            } else {
                window.location.href = "http://127.0.0.1:5500/src/html/14_登录注册.html";
            }
   
       });
   }
   

5. 打开网页时注意用vsc的服务器打开，不要用本地文件夹路径打开。