zoukankan      html  css  js  c++  java
  • vue-cli3.0+node.js+axios跨域请求session不一样的问题

    一.问题重述

    使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的时候,

    session变为空了,很纳闷为什么。

    二.项目步骤,

    前端部分的改动:

    (1)vue使用vue/cli3搭建脚手架,一开始没有设置代理,各种不行,后来,设置proxy代理,

           vue/cli3代理设置的方法:

      在项目根目录新建一个文件夹(就是根目录新建就行了,官网这么说的)vue.config.js

      里面的内容:

    module.exports = {
        devServer: {
      // 设置代理
          proxy: {
           '/app': {
            // 目标 API 地址
             target: 'http://localhost:3000/',
            // 如果要代理 websockets
             ws: true,
            // 将主机标头的原点更改为目标URL
             changeOrigin: true,
            //这个必须写啊。。。。(我也不知道为啥,不写就错了)
             pathRewrite:{
              '^/app':""
              }
            }
         }
      }
    }
      然后npm  run server  就好了,
      请求这么写:axios.get("/app/api/userInfo/isLogin").then(res => {})
     
    (2)现在还没改完呢:
      // main.js文件下加上这两句
      import axios from 'axios'
      axios.defaults.withCredentials=true;
     
      为啥加这个呢,因为axios请求里面,标准的跨域请求是不会发送cookie等用户认证凭据的。所以,当你再次访问远程api的时候,cookie是不会被带上的,于是乎,服务器理就不会找到同样的session。MDN上的简单介绍 credentials 。用XMLHttpRequest请求的时候,我们需要设置属性 withCredentials=true ;

     node端部分的修改:

     (1)// app.js里面加上允许跨域

    app.use(function (req, res, next) {
      res.header("Access-Control-Allow-Credentials", "true");
      res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
      // 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');
      if (req.method == 'OPTIONS') {
        res.send(200); /*让options请求快速返回*/
      } else {
        next();
      }
    })

    解释一下标蓝的三块意思:本来没有res.header("Access-Control-Allow-Credentials", "true");  这行的,但是不加的话,前端携带的cookie就过不来。两个接口请求的session还是不一样。

    但是请求设置有个限制,一旦设置了res.header("Access-Control-Allow-Credentials", "true",那么res.header('Access-Control-Allow-Origin', ‘*’);就会在前端报错。告诉你不能设置成*,

    这个origin设置成*的目的是,允许所有的域来跨域访问数据。这个原因我也不知道为啥,但是可以设置多个,你要跨域的域名。我设置成了res.header('Access-Control-Allow-Origin', 'http://localhost:8080');这一块的解释,看这个小哥说的: https://blog.csdn.net/vincent_ling/article/details/51714691

    这样前后端都改后,再次在前端两个不同的接口访问后端的req.session,存储的信息就会一样了。

     
     
  • 相关阅读:
    spring reference
    Connector for Python
    LDAP
    REST
    java利用泛型实现不同类型可变参数
    java细节知识
    事务隔离的级别
    servlet cdi注入
    session and cookie简析
    CORS’s source, principle and implementation
  • 原文地址:https://www.cnblogs.com/guangixn/p/9843946.html
Copyright © 2011-2022 走看看