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

最新推荐文章于 2024-05-27 08:00:00 发布
最新推荐文章于 2024-05-27 08:00:00 发布
阅读量2.1k 收藏 4
点赞数
分类专栏： vue小白炼成记 vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chpswg/article/details/108845081
版权
这篇博客介绍了在Vue-admin-template中处理多个跨域情况的解决方案，特别是在开发模式下。主要内容包括在proxyTable中配置不同接口的跨域，如计划服务器和天气服务器，并在.env.production中设置默认跨域地址。同时，讲解了如何通过新建请求文件如myPlan.js和mapProxy.js，以及修改baseURL来实现特定接口的调用。
摘要由CSDN通过智能技术生成

通常在跨域时会涉及到从某个固定的服务器获取数据，比如计划信息从计划接口服务器获取（主要的跨域地址），但是天气信息从固定的气象接口服务器获取，图片信息从图片接口服务器获取，此时不能用原来的默认模式

一、简单的方法（只讲开发模式下）

1、直接在proxyTable中配置

1）配置开发环境下默认计划服务器地址跨域

2）配置开发环境下天气信息跨域

简单模式时完整配置，如天气信息getWeather的实际完整地址

3）修改开发环境的默认根目录地址为主要的跨域配置地址

在根目录下找到.env.production文件，修改VUE_APP_BASE_API为1.1中设置的计划的跨域地址/apis

可以看到这个VUE_APP_BASE_API是在src/utils/request.js文件中被引用

最低0.47元/天 解锁文章
cici_cmh
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-element-admin
12-17
结合vue 目前最新技术，及element-ui 等vue辐射产品。着重介绍了 vue vuex axios vue-router es6 等相关技术。
详解使用vue-admin-template的优化历程
08-27
Vue-Admin-Template 是一个基于 Vue.js 的后台管理系统模板，旨在提供一个快速、灵活、可扩展的解决方案。然而，在实际开发中，我们发现了许多问题，例如打包出来的文件体积非常大，影响了用户体验和开发效率。因此...
vue-admin-template解决跨域问题详解
qq_41665826的博客
05-22 4255
vue-admin-template入门详解(后端springboot+sprngsecurity+jwt+redis) 自&如 2020-05...
vue框架学习 -- 跨域问题解决之 proxy 配置
最新发布
dazhong2012的专栏
05-27 995
文件中的 devServer.proxy 配置来设置一个代理服务器。这个代理服务器会拦截特定的请求，并将其转发到目标后端服务器。通过上述配置，当Vue应用在开发过程中发出对 /api/xxx 的任何HTTP请求时，这些请求会被。在Vue.js项目中，为了在开发环境下解决跨域问题，我们可以利用 vue.config.js。从而绕过了浏览器的同源策略限制，使得前端应用能够与不同域名下的后端服务正常交互。// vue.config.js 文件。// vue.config.js 文件。
vue-admin-template模板、解决跨域问题
m0_46392290的博客
06-03 2584
vue-admin-template 我们可以在github上进行下载，下载之后我们只需要把它放到我们自己所需要的文件。 在命令行进入当前文件夹 执行命令 去下载packjson中的依赖 npm install 下载完成之后 运行 就能成功访问 npm run dev 文件结构 跨域问题 产生 跨域的主要问题是 三者有一点不同就会产生跨域问题 协议 域名 端口号 我们通过刚才启动项目可以明显看到 http://localhost:9528/ 现在我们要添加自己的后端 这样就会出现跨域问题 ht
vue-admin-template 解决跨域问题
weixin_43980468的博客
04-09 2251
vue-admin-template 解决跨域请求问题
vue-admin-template解决跨域问题
又菜又爱玩的博客
02-15 988
在vue.config.js下添加如下内容 设置proxy代理，其中target就是你要代理的地址
vue-admin-template-master.zip
12-05
在"vue-admin-template-master.zip"这个压缩包中，我们很显然有一个使用Vue CLI 3搭建的项目模板，其中集成了Element UI作为UI框架。 首先，让我们详细了解一下Vue CLI 3。Vue CLI 3 提供了一套全面的脚手架工具，...
vue-admin-template-4.4.0.zip
03-01
7. **自定义与扩展**：Vue-admin-template提供了一个基础框架，开发者可以根据自己的需求进行定制，比如添加新的页面、修改样式、集成更多API等，以满足特定的业务场景。 8. **测试与部署**：项目可能还包含了单元...
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
Vue-admin-template是基于Vue.js的一个后台管理系统模板，它提供了一个快速开发后台应用的基础架构。这个模板通常包含路由、组件、状态管理（Vuex）以及API调用等核心功能，极大地简化了开发流程。 在“学习vue-...
vue-admin-template-master-3.8.0.zip
03-01
"vue-admin-template-master-3.8.0.zip"这个压缩包文件包含了Vue-admin-template的3.8.0版本源代码。Vue-admin-template是一个强大的、高度可定制化的后台管理系统模板，它利用了Vue.js的特性，结合了Element UI组件...
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
vue-admin-template解决前端跨域问题---简单快速（vue-cli3）
weixin_45116146的博客
11-23 1793
1.跨域无非就是：协议、域名、端口不同导致vue-cli3提供了一个 proxy选项，用来代理接口转发流量。我们可以在根目录下新增vue.config.js文件，添加如下的配置： proxy: { '/api': { //后端的接口固定开头 target: 'http://域名',//后台接口地址 ws: true, //// 是否启用websockets changeOrigin:.
使用vue-admin-template 中跨域问题解决
weixin_30634661的博客
04-05 4562
1、修改dev.env.js中的文件 例如： module.exports = merge(prodEnv, { NODE_ENV: '"development"', ENV_CONFIG: '"dev"', BASE_API: '"/admin"', //这个地方格局需要配置你接口前缀名称})2、在index.js 中设置 proxyTable proxyTable: { '/...
Vue | 基于 vue-admin-template 项目的跨域问题解决方法
狂放不羁霸的博客
03-08 621
一、现存问题 二、解决方法
vue-admin-template 基础版本api接口配置和springboot跨域问题（学习记录）
m0_62923660的博客
11-23 457
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 850
使用@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-emement-admin实现跨域
weixin_60152773的博客
06-15 320
1：配置跨域的端口号和后端的端口号必须一致(新版本的修改地方在：evn.development)： 2：后端添加跨域的注解：3：修改vue返回成功的状态码和后端返回的状态码必须一致(vue默认返回成功的状态码是20000很关键)...
vue-admin-template解决登录和跨域问题
hznb_369的博客
05-30 995
一、下载安装项目 git地址：https://github.com/PanJiaChen/vue-admin-template.git 二、修改登录访问地址 三、解决跨域问题
vue-admin-template-master配置跨域端口号
08-23
在vue-admin-template-master中配置跨域端口号的步骤如下： 1. 打开vue-admin-template-master文件夹，在根目录下找到config文件夹，然后打开index.js文件。 2. 在index.js文件中找到dev对象，它是用于开发环境的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值