40

vue项目部署后,js-cookie的domain属性设置无效,无法登录

1.问题描述

  1. 在开发环境中,使用js-cookie设置如下,本地环境可以实现cookie携带token实现单点登录
        submitLogin(){
          // 第一步:调用接口进行登录,返回token字符串
              loginApi.submitLoginUser(this.user)
                .then(response => {
                  this.message = response.data.message

                  //判断一下被试是否输入了合法的账户和密码
                  var reg =  RegExp(/全局/)
                  if(response.data.code == 20001 && response.data.success == true){
                      if(response.data.message.match(reg)){
                        this.open1()
                      }else{
                        this.open2()
                      }
                  }else{
                    //第二步:把token存在cookie中、也可以放在localStorage中
                        //1.调用cookie的方法set,放对象;
                        //2.三个参数:cookie名字 cookie值 作用域
                      cookie.set('cnu_token', response.data.data.token, { domain: 'localhost' })
                      //第三步:创建拦截器,把cookie值放进header中
                      //第四步:调用后端接口,根据token获取用户信息
                      loginApi.getLoginUserInfo()
                        .then(response => {
                        this.loginInfo = response.data.data.userInfo
                        //将返回的用户信息,也放入cookie
                        cookie.set('cnu_ucenter', this.loginInfo, { domain: 'localhost' }) 
                        //跳转页面
                        window.location.href = "/";
                    })
                    .catch(error => {//请求失败
                      console.log(error)
                    })
                  }        
              })
        },

  1. 但是部署阿里云后,将domain的代码改成如下域名,却无法实现登录
else{
                    //第二步:把token存在cookie中、也可以放在localStorage中
                        //1.调用cookie的方法set,放对象;
                        //2.三个参数:cookie名字 cookie值 作用域
                      cookie.set('cnu_token', response.data.data.token, { domain: 'cnu.cool' })
                      //第三步:创建拦截器,把cookie值放进header中
                      //第四步:调用后端接口,根据token获取用户信息
                      loginApi.getLoginUserInfo()
                        .then(response => {

                        this.loginInfo = response.data.data.userInfo
                        //将返回的用户信息,也放入cookie
                        cookie.set('cnu_ucenter', this.loginInfo, { domain: 'cnu.cool' }) 
                        //跳转页面
                        window.location.href = "/";
                    })
                    .catch(error => {//请求失败
                      console.log(error)
                    })
                  }

2.可以与接口进行通信

输错密码会提示,从接口返回的"密码错误"提示,输错账号会从后端返回"账号错误"的提示,可以确定与后端确实是进行了通信

3.端口号

该项目的端口号是83,即cnu.cool:83可以访问,并且能够成功的打开网站,就是没办法成功的登录

4.项目框架

项目使用的是nuxt服务端渲染技术

5.看网上有说关于nginx跨域不携带cookie导致,但是目前的项目并没有跨域名,都在统一域名中进行

6.有说域名前需要加'.',来代表该域名和子域名,这个也试过了,但是不行

若那位哥哥姐姐有过前端的经验,请速来救小弟

查看全部
weixin_46592485
weixin_46592485
2020/09/26 10:11
  • node.js
  • 负载均衡
  • vue.js
  • ajax
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信

3个回复