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 登录和跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • VUE中template的三种写法

    一.直接写在构造器中 <!-- 第一种写法:直接写在构造器里 --> <div id ="app1"> </div> <script> var vm1 = new Vue({ el: '#app1', data: {}, methods: {}, template:`<h3>在构造器中的文字</h3>` }); </script> 二.写在HTML自带的<template>标签中 <!

  • vue中关于template报错等问题的解决

    目录 template报错 vue报错问题 template报错 写这个纯粹是为了纪念有多蠢 template:` <div class='app'>     <button ref = 'btn'>我是按钮1</button>     <subCom ref = 'subc'></subCom> </div>     `, 关于template里面写的HTML,经历了报错,控制台反映字符串不齐,语法错误等一系列问题后,查遍了各种博客

  • 关于vue-admin-template模板连接后端改造登录功能

    首先修改统一请求路径为我们自己的登陆接口,在.env.development文件中 # base api VUE_APP_BASE_API = 'http://localhost:8081/api/dsxs/company' 打开登陆页面,src/views/login/index.vue <template> <div class="login-container"> <el-form ref="loginForm" :model=&

  • vue框架render方法如何替换template

    vue框架render方法如何替换template

    目录 render方法替换template 使用template属性创建组件模板 把父组件的template创建换成使用render方法创建 template和render用法对比 render方法替换template 使用template属性创建组件模板 import Vue from 'vue'   const Item = Vue.component('Item', {   template: `<div>                 <h2>子组件</h2>

  • 详解vue中v-for和v-if一起使用的替代方法template

    详解vue中v-for和v-if一起使用的替代方法template

    目录 版本 目标效果 说明 解决方法 核心代码片段 Car.vue vue中v-for和v-if一起使用的替代方法template 版本 vue 2.9.6element-ui: 2.15.6 目标效果 说明 在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用 解决方法 选择性地渲染列表,例如根据某个特定属性(category )来决定不同展示渲染,使用计算属性computed 见https://www.jb51.net/article/24717

  • Vue编程三部曲之将template编译成AST示例详解

    Vue编程三部曲之将template编译成AST示例详解

    目录 前言 编译准备 源码编译链式调用 compileToFunctions parse 解析 template 标签匹配相关的正则 stack advance while 解析开始标签 解析结束标签 当前 template < 不在第一个字符串 处理 stack 栈中剩余未处理的标签 生成 AST start 钩子函数 end 钩子函数 为什么回退? 解析 <p> 解析 </p> chars 钩子函数 commit 钩子函数 番外(可跳过) createASTElement

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

    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

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • Vue动态加载图片在跨域时无法显示的问题及解决方法

    写在前面 小记,就简单写了 .问题:VUE开发时因为要访问后端的接口所以要配置请求转发,如果直接转发全部请求,那么VUE动态绑定的src也会转发到后端,因为图片在前端,所以会收到404 NOT FOUND的报错. 常规的请求转发 在vue-cli3内,直接编辑vue.config.js,如下: let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pa

  • vue 设置proxyTable参数进行代理跨域

    什么是代理跨域 浏览器之间有同源策略,出于安全考虑不同域之间不允许获取数据,除了几个特殊的例子 <img>.<script>.<audio>等标签可以进行跨域但是通常都是以get的形式,如果用js的axios去远程获取的话进会触发同源政策,除非你服务端的代码设置了header同意让你访问,明显这很不合理呀!.现在不是都流行前后端的分离吗,后端代码跑掉了只剩下前端了,两个次元的代码我前端该怎么获取啊,感觉使用跨域好麻烦好难搞啊还不一定搞得到,这个时候就可以用到代理跨域了

  • Java开发中解决Js的跨域问题过程解析

    这篇文章主要介绍了Java开发中解决Js的跨域问题过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 主流方法有JSONP和CORS两种,这里记一下后者的方式,理论基础就是在请求的时候在http请求头中添加如下属性: //指定允许其他域名访问 Access-Control-Allow-Origin:http://localhost:8989 如果后端用Java开发,在返回请求中可以添加如下属性 1.在跨域问题中,如果不操作cookie,只需

  • Nginx配置解决NetCore的跨域问题

    使用Nginx配置解决NetCore的跨域 废话不多说,直接上Nginx配置 server { listen 80; server_name 你的Id或域名; location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET,POST,PUT,DELETE,PATCH,OPTIONS'; add_header Access-Control-Allow-Header

  • 前端面试必会网络跨域问题解决方法

    前端面试必会网络跨域问题解决方法

    目录 什么是跨域 跨域解决方法1-代理 跨域解决方法2-JSONP 跨域解决方法3-CORS 概述 简单请求 简单请求的判定 简单请求的交互规范 需要预检的请求 附带身份凭证的请求 一个额外的补充 什么是跨域 浏览器有一个重要的安全策略,称之为「同源策略」 其中,源=协议+主机+端口源=协议+主机+端口源=协议+主机+端口,两个源相同,称之为同源,两个源不同,称之为跨源或跨域 比如: 源 1 源 2 是否同源 www.baidu.com www.baidu.com/news www.baidu.

  • java 请求跨域问题解决方法实例详解

    java 请求跨域问题解决方法实例详解 新建Util类,在Util中添加下面方法: /* * response请求跨域公共设置 */ public static HttpServletResponse SetHttpServletResponse( HttpServletResponse response) { response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader(&qu

  • webpack开发跨域问题解决办法

    本文介绍了webpack开发跨域问题解决办法,分享给大家,具体如下: 1. 说明 webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题 2. API 需要代理的 pathname 要加 / module.exports = { devtool: 'cheap-module-source-map', entry: './app/js/index.js' output: { path: path.resolve(__dirname, 'dev'),

  • Spring MVC中自带的跨域问题解决方法

    前言 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制.本文将详细介绍关于Spring MVC跨域问题解决的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 问题 使用Spring mvc 开发了一个Restful 接口 供前端调用 @PostMapping("/search") public List<Map> search(@RequestBody QueryParams qu

随机推荐