Vue | 基于 vue-admin-template 项目的跨域问题解决方法

原创

已于 2024-03-08 20:40:03 修改 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #服务器

于 2024-03-08 20:37:33 首次发布

本文详细描述了在Vue项目中遇到的报错及如何通过修改.env.development、vue.config.js和request.js中的配置来解决API访问问题，涉及跨域处理和baseURL设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自存

一、现存问题

报错截图如下：

二、解决方法

2.1 修改的第一个地方

在 .env.development 文件中：

# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://18.137.108.102:8080' # 修改为服务器地址

2.2 修改的第二个地方

在 vue.config.js 文件中：<

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

狂放不羁霸

关注关注

12
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue-admin-template 多个跨域模式设置

chpswg的专栏

09-28

2233

通常在跨域时会涉及到从某个固定的服务器获取数据，比如计划信息从计划接口服务器获取（主要的跨域地址），但是天气信息从固定的气象接口服务器获取，图片信息从图片接口服务器获取，此时不能用原来的默认模式一、简单的方法（只讲开发模式下） 1、直接在proxyTable中配置 1）配置开发环境下默认计划服务器地址跨域 2）配置开发环境下天气信息跨域简单模式时完整配置，如天气信息getWeather的实际完整地址 3）修改开发环境的默认根目录地址为主要的跨域配置地址在根目录下找到.env.pr

vue-element-admin 和 vue-admin-template及新版本vue-element-admin调用后端接口和跨域

xxh_1229的博客

01-20

5569

vue-element-admin 和 vue-admin-template简介及新版本vue-element-admin调用后端接口和跨域一、vue-element-admin 1、简介而vue-element-admin是基于element-ui 的一套后台管理系统集成方案。功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/ GitHub地址：https://github.com/PanJiaChen/vue-eleme

参与评论您还未登录，请先登录后发表或查看评论

vue-element-admin

12-17

vue-admin-template:vue管理模板

03-07

vue管理模板 English | 具有Element UI，axios，iconfont，权限控制和lint的最小vue管理员模板现场演示： : 当前版本是在vue-cli上构建的v4.0+ 。如果要使用旧版本，可以将分支切换到，它不依赖于vue-cli 构建设置 # clone the project git clone https://github.com/PanJiaChen/vue-admin-template.git # enter the project directory cd vue-admin-template # install dependency npm install # develop npm run dev 这将自动打开建造 # build for test environment npm run build:stage # build for

【前端学习日记】Vue2开发环境跨域问题

qq_54207312的博客

08-02

1772

为什么跨域：据说是浏览器的同源策略，不允许协议、端口、路径不一致的IP相互访问，详情可以自行百度或文档。那我们一般的一般开发的时候就是会打开一个本地服务器嘛，如localhost:8080等，那么我们访问下面这个地址:https://www.baidu.com/index/ding.json的话，就违背了同源策略。自己项目本身用的是最后那种方便的形式，但是一直配置不生效，后来对着大佬文档一个字一个字扣，终于不报跨域的错误了。3、因为请求是从服务端发出的，所以就不存在跨域的问题了。第二部分：axios配置。.

vue打包区分不同的ip(代理和未代理)

L67k7的博客

12-22

1326

很多时候我们打包要区分测试环境和正式环境,就会涉及不同打包命令项目链接不同的ip 下可在项目主目录下的.env.development,.env.production来区分不同的环境一.未做反向代理 1 .env.development文件: ENV = 'development' VUE_APP_BASE_API = 'https://...com' //此处为第一个后台接口地址 2.env.production文件: ENV = 'production' VUE_APP_BA...

vue-admin-template模板、解决跨域问题

m0_46392290的博客

06-03

2864

vue-admin-template 我们可以在github上进行下载，下载之后我们只需要把它放到我们自己所需要的文件。在命令行进入当前文件夹执行命令去下载packjson中的依赖 npm install 下载完成之后运行就能成功访问 npm run dev 文件结构跨域问题产生跨域的主要问题是三者有一点不同就会产生跨域问题协议域名端口号我们通过刚才启动项目可以明显看到 http://localhost:9528/ 现在我们要添加自己的后端这样就会出现跨域问题 ht

vue-admin-template.zip

03-18

Vue-admin-template已经完成了与后端的联调配置，这意味着你可以直接开始调用API接口，而无需担心跨域问题或者代理设置。通常，这会在项目的`vue.config.js`文件中进行配置，通过代理服务器转发请求到后端服务。 3....

Vue的vue-admin-template-master基础模板修改，后台连接数据库并且使用springsecurity安全框架

xiaxiao520的博客

11-10

1860

目录 1、配置跨域 2、如果想使用中文版的，找到main.js 3、找到src下的store-->modules下面的user.js文件 4、点击最上方的login就可以直接进入src下api中的user.js中 5、设置权限get方法 5、设置发送请求文件 1、配置跨域 1.找到vue.config.js 和 overlay同级下加跨域配置 proxy: { '/api':{ target:"http://192.168.43.48:8087/"...

vue-admin-template解决跨域问题详解

qq_41665826的博客

05-22

4657

vue-admin-template入门详解(后端springboot+sprngsecurity+jwt+redis) 自&如 2020-05...

一个基于vueadmintemplate的hexo博客后台管理项目采用SpringBootVue开发

08-14

一个基于vue-admin-template的hexo博客后台管理，项目采用SpringBoot Vue开发

Bug：vue-admin-template二次开发报跨域问题

weixin_45565886的博客

09-26

574

Bug：vue-admin-template二次开发报跨域问题，跨域问题常见原因

vue-admin-template解决跨域问题

又菜又爱玩的博客

02-15

1054

在vue.config.js下添加如下内容设置proxy代理，其中target就是你要代理的地址

使用vue-admin-template 中跨域问题解决

weixin_30634661的博客

04-05

4603

1、修改dev.env.js中的文件例如： module.exports = merge(prodEnv, { NODE_ENV: '"development"', ENV_CONFIG: '"dev"', BASE_API: '"/admin"', //这个地方格局需要配置你接口前缀名称})2、在index.js 中设置 proxyTable proxyTable: { '/...

vue-admin-template 基础版本api接口配置和springboot跨域问题（学习记录）

m0_62923660的博客

11-23

880

2,自己开发时候找到 .env.development 文件设置 VUE_APP_BASE_API里的地址为你的后台api接口地址即可。注：线上需要修改.env.production里的VUE_APP_BASE_API。1，打开vue.config.js文件在overlay后新增。

【前端】使用vue-admin-template封装的Axios时跨域问题

weixin_43185955的博客

05-16

896

使用@CrossOrigin注解时，再用@RequestMapping会出现拦截失效解决方法1：如果是get请求那就用@GetMapping即可解决方法2：配置一个跨域配置类 import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.

vue-element-admin解决跨域问题

FIRE

07-19

2382

3. 更改 .env.development。

vue-admin-template解决前端跨域问题---简单快速（vue-cli3）

weixin_45116146的博客

11-23

1994

1.跨域无非就是：协议、域名、端口不同导致vue-cli3提供了一个 proxy选项，用来代理接口转发流量。我们可以在根目录下新增vue.config.js文件，添加如下的配置： proxy: { '/api': { //后端的接口固定开头 target: 'http://域名',//后台接口地址 ws: true, //// 是否启用websockets changeOrigin:.

vue-admin-template跨域问题如何解决