如何处理vue因为跨域问题导致的无法登陆问题

在这篇文章中我们来了解一下“如何解决vue因为跨域问题导致的无法登陆问题”，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

vue项目登录成功拿到令牌跳转失败401无登录信息

之前的一个上线半年多的项目，客户提出一点小需求改动，当跑项目时发现线上没有问题，线下登录成功，自动跳转后验证登录人信息时验证失败，无登录信息导致页面一直停留在登录页

登录请求成功

随后跳转页面后调取当前登录人信息无效，跳回登录页重新登录

导致页面一直停留在登录页。

问题原因

线下测试环境地址可能存在跨域问题，但是不会报跨域错误，部分接口可以访问，但访问后的接口数据得不到认可。

common.js原地址写法

root() {

return o.isDev() ? "https://www.baidu.com/api/admin/" :

"https://www.baidu.com/api/admin/";

},

改为

root() {

return "/api/admin/";

},

同时vue.config.js加代码如下

const devServerBaseUrl = "https://www.baidu.com"

module.exports = {

devServer: {

// 在devServer里加下面代码

proxy: {

'/api/*': {

target: devServerBaseUrl,

pathRewrite: {

'^/api': '/api'

}

},

}

// 加以上代码，其他需要的配置这里删除了，其他配置需要的自行添加

},

}

这样就可以避免接口地址正确，但是存在跨域不报错的问题，如上操作是公司大佬传授的

vue项目登录处理token令牌问题

1、在点击登录按钮后，后台会返回一个token

2、将得到的token先储存在sessionStorage中，window.sessionStorage.setItem('token',token)

3、然后就可以在请求拦截器中获取到存储的token

//axios请求拦截器

    instance.interceptors.request.use(config => {

      //在此处携带token,将token放在请求头中，传给后台

      if(window.sessionStorage.getItem('token')) {

        config.headers['Authorization'] = window.sessionStorage.getItem(token)

      }

      return config;

    }, err => {

      console.log(err);

    })

到此，关于“如何解决vue因为跨域问题导致的无法登陆问题”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!