vue-cli2.x统一配置接口请求地址和开发环境的跨域代理

最新推荐文章于 2025-08-01 10:00:33 发布
原创 最新推荐文章于 2025-08-01 10:00:33 发布 · 3.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue-cli #process.env #proxyTable

1、修改config/dev.env.js（开发环境的baseURL地址统一配置）

在这里插入图片描述

2、修改config/prod.env.js（线上环境的baseURL地址统一配置）

在这里插入图片描述

3、修改config/index.js，配置开发环境的跨域代理url

在这里插入图片描述

4、自己封装axios请求js文件（request.js）

在这里插入图片描述

5、自己封装url地址js文件（apiUrl.js）

本来完整的后台接口地址api： https://xxx.xxxxxx.com/api/cdn/domain_list
现在直接写如下面的缩写即可。

最低0.47元/天 解锁文章

新学期VIP享超值加赠
vue devServer.proxy代理，统一后端域名配置和跨域解决
向宇
07-21 1892
vue devServer.proxy代理，统一后端域名配置和跨域解决，在实际开发过程中，前后端分离必定会存在跨域，配置同意域名，设置代理解决这个问题。—— 向宇
Vue2配置前端代理
一+一加1的博客
06-24 698
在8080向5000请求数据cli+vue2。
vue2.x(vue-cli2.x)配置跨域请求代理，设置请求头
热门推荐
winne雪
11-06 2万+
1、在config/index.js设置配置文件，跨域配置代理 （默认里面内容为空，我们需要加入对跨域接口的配置） 根据接口的不同设置的请求头和主机也不同，自己按照格式要求进行配置即可。 如上图配置好了之后，'/apis/getSongLyric'为自定义的axios请求路径，自己根据相应接口功能来命名。后面在用axios请求接口的时候，url路径就要写自定义的这个，那么代理就会自动解析成对应的请...
VUE2 学习笔记15 代理
最新发布
mashirokayo的博客
08-01 635
配置代理时，相当于在前后端交互时，有一个代理服务器，代理服务器和前端的端口号一致，当前端向后端请求数据时，不直接给后端发送请求，而是把请求发给代理服务器，代理服务器把请求转发给后端服务器，代理接收到后端服务器的数据时（由于代理服务器和后端服务器都是服务器，服务器之间通过HTTP请求通信，也不存在跨域问题），代理服务器把数据反馈给前端。思考一种情况，对于一个搜索列表，如果初始进入列表时，显示的是欢迎词，当搜索时，数据未返回时，显示的是加载画面，当数据返回后，显示的是数据列表，当数据请求失败时，显示错误信息。
vue项目统一管理后端URL
qq_63431773的博客
03-10 756
如果有多个，并且它们的URL不同，可以通过创建一个配置文件来统一管理这些URL。
vue config 接口地址配置
飞扬小阁
11-25 590
在Vue项目中，通常会有一个配置文件来设置不同环境下的接口地址。这样做可以方便地在开发、测试和生产环境之间切换时更改接口地址。以下是一个使用Vue CLI创建的项目中的。vue config 接口地址配置。在应用代码中，你可以使用。
5.14 Vue-Cli配置跨域代理
毛毛的博客
05-14 837
目标: 通过配置vue-cli的代理解决跨域访问的问题 当下,最流行的就是**前后分离项目,也就是前端项目和后端接口并不在一个域名之下，那么前端项目访问后端接口必然存在跨域**的行为. 怎么解决这种跨域 ？ 请注意，我们所遇到的这种跨域是位于开发环境的，真正部署上线时的跨域是生产环境的 开发环境的跨域 开发环境的跨域，也就是在**vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求**,解决跨域问题 这就是vu.
Vue-cli3.x + axios 跨域方案踩坑指北
10-16
Vue-cli 3.x 是 Vue.js 开发环境中的脚手架工具，它提供了便捷的项目配置和构建流程。在开发过程中，由于浏览器的同源策略限制，前端应用（通常运行在本地开发服务器，如 `webpack.devServer`）在访问不同源的后端...
详解vue-cli项目开发/生产环境代理实现跨域请求
01-19
跨域的方法很多，通常都需要后台配置，不过vue-cli创建的项目，可以直接利用node.js代理服务器，通过修改vue proxyTable接口实现跨域请求。在vue-cli项目中的config文件夹下的index.js配置文件中，修改前的dev： ...
vue（2.x，3.0）配置跨域代理
10-15
与Vue 2.x的配置方法类似，你需要指定哪些API请求路径需要被代理，以及它们对应的`target`地址和是否需要`changeOrigin`。 在配置跨域代理时，`target`属性指定了API请求的目标地址，这里必须是完整的URL，包括协议...
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
08-27
新版Vue-cli模板下本地开发环境使用Node服务器跨域的方法 在新版Vue-cli模板下，本地开发环境中使用Node服务器跨域是一种常见的解决方案。为了解决浏览器的同源策略限制，本文将为大家介绍一种使用Node服务器跨域的...
vue设置全局访问接口API地址操作
11-20
在使用vue框架进行前后端分离项目开发时，通常涉及到与后段接口进行交互，平时一般使用比较多的就是用axios来实现调用后段接口，写法一般为 xxx() { const _this = this axios.get("http://ip:port/xx/xx").then(function (resp) { .....//省略 }) } 但是有一个比较普遍的问题就是，假如我们后端接口地址改变了，或者是网络地址发生了变化，就需要在上面IP以及端口的位置每一处都需要修改，所以我们需要一个一处设置 处处可用的配置，如下 在src目录下新建interf
vue配置接口域名方法总结
10-17
在本篇文章里小编给大家分享了关于vue配置接口域名方法和相关知识点总结，需要的朋友们跟着操作下。
vue 接口请求地址前缀本地开发和线上开发设置方式
11-20
开发环境 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./dev.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"https://www.dev.com"' //本地请求前缀 }) 线上开发环境 config/prod.env.js 'use strict' const merge = require('webpack-merge')
vue项目接口访问地址设置
瘦瘦瘦大人的博客
09-07 5411
vue项目接口访问地址设置
vue项目配置真实接口地址
是日已过，命亦随减的博客
07-16 1245
target:即是真实接口地址，不要忘了index.php 不要管页面的请求的地址，Request URL: http://127.0.0.1:8080/v1/gallery 实际请求的接口地址就是target module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/v1/**': { //
vue接口路径配置
个人工作学习内容总结
05-19 1086
在个人开发中，大多说vue的封装是固定形式 是写在文件中，切不可更改 例： URL: 'http://127.0.0.1:8182/', axios()//方式 ajax()//方式 如何在项目封装后依然可以更改？ 创建文件 在根目录下创建static文件夹 并创建config.json文件 { "name": "static", "version": "1.0.0", "url": "http://127.0.0.1:8183/", "dependencies": {}, } 在js
vue接口的配置
weixin_61032994的博客
04-26 9317
1.在src下创建api文件夹 2.在api里创建config.js 和 index.js文件 3.在config.js里引入axios，写入以下内容 4.在index.js里导入config.js里的http，把他取别名axios 5.在需要的地方引入index文件，然后调用接口(我这里是把index文件取名为api) 6.参考文章 ...
vue配置服务端请求地址
楠藜的博客
05-21 2532
vue配置服务端请求地址
Vue-cli项目跨域配置：proxyTable详解
"vue-cli项目的proxyTable用于解决开发环境中API接口跨域的问题，主要涉及前端Vue.js框架和基于Node.js的脚手架工具vue-cli。跨域是由于浏览器的同源策略限制，不同源的资源之间无法直接交互。本文将详细探讨跨域的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值