脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-admin-template 登录和跨域

vue-admin-template解决登录和跨域问题解决

 更新时间：2022年05月30日 09:12:02   作者：CAFEBABE 34  
本文主要介绍了vue-admin-template解决登录和跨域问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、下载安装项目

git地址：https://github.com/PanJiaChen/vue-admin-template.git

在这里插入图片描述

二、修改登录访问地址

找到 .env.develpment文件

# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:9001'
port = 9528

设置自己的访问端口和启动端口。

找到登录页面 /src/views/login/index.vue

在这里插入图片描述

这里他会 去找到 /api/user/login

在这里插入图片描述

这里的url改成自己需要访问的页面

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/eduservice/user/login',
    method: 'post',
    data
  })
}

然后查看 @/utils/request 这个文件

在这里插入图片描述

在这里可以看到我们第一步配置的路径。

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

因为我使用了nginx做反向代理所以我访问的是 9001端口 这个可以根据自己的需要设置。

在这里插入图片描述

三、解决跨域问题

在需要访问的后端接口的controller类上加上注解即可
@CrossOrigin

在这里插入图片描述

到此这篇关于vue-admin-template解决登录和跨域问题解决的文章就介绍到这了,更多相关vue-admin-template 登录和跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue实现发送短信倒计时和重发短信功能的示例详解

    vue实现发送短信倒计时和重发短信功能的示例详解

    这篇文章主要给大家介绍了vue实现发送短信倒计时和重发短信功能的相关知识,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue 怎么创建组件及组件使用方法

    vue 怎么创建组件及组件使用方法

    vue中的核心就是组件，组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码，下面通过本文重点给大家介绍vue 创建组件及组件使用方法，感兴趣的朋友一起看看吧
    2017-07-07
  • Vue实现渐变色进度条的代码

    Vue实现渐变色进度条的代码

    这篇文章主要介绍了Vue实现渐变色进度条的代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue如何封装Axios的get、post请求

    vue如何封装Axios的get、post请求

    这篇文章主要介绍了vue如何封装Axios的get、post请求，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • Vue如何实现iframe的上一步、下一步操作

    Vue如何实现iframe的上一步、下一步操作

    这篇文章主要介绍了Vue如何实现iframe的上一步、下一步操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • Vue用v-for给src属性赋值的方法

    Vue用v-for给src属性赋值的方法

    下面小编就为大家分享一篇Vue用v-for给src属性赋值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue+webpack实现异步组件加载的方法

    vue+webpack实现异步组件加载的方法

    下面小编就为大家分享一篇vue+webpack实现异步组件加载的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue2.0开发实践总结之疑难篇

    vue2.0开发实践总结之疑难篇

    这篇文章主要为大家总结了vue2.0开发实践的疑难,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue快速入门基础知识教程

    vue快速入门基础知识教程

    VUE是一套前端框架，免除了原生JavaScript中的DOM操作，简化书写。VUE基于MVVM（Model-View_ViewModel）思想，实现数据双向绑定。Vue的核心库只关注图层.响应式数据绑定和组件化开发是其两大特点。
    2023-01-01
  • Vuejs第十三篇之组件——杂项

    Vuejs第十三篇之组件——杂项

    组件（Component）是 Vue.js 最强大的功能之一。本文重点给大家介绍vuejs组件相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-09-09

最新评论