Vue axios 给开发环境和生产环境配置不同的接口地址 及 跨域问题

最新推荐文章于 2023-07-28 17:58:40 发布
最新推荐文章于 2023-07-28 17:58:40 发布
阅读量770 收藏 1
点赞数
分类专栏： axios 文章标签： vue 接口
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44825701/article/details/103801656
版权
本文介绍了在Vue项目中，如何针对开发环境和生产环境配置不同的接口地址，以及如何处理跨域问题。具体步骤包括修改dev.env.js和prod.env.js文件以设置接口地址，将配置挂载到vue原型上，以及利用axios和webpack代理来解决跨域请求。
摘要由CSDN通过智能技术生成

具体配置

1.在项目中找到以下两个文件：

config/dev.env.js 和 config/prod.env.js

生产环境的接口
在这里插入图片描述
开发环境的接口
在这里插入图片描述
2.在src/main.js文件中配置全局变量（挂在vue原型上）
在这里插入图片描述
3使用
在这里插入图片描述

跨域

下载 cnpm install axios --save-dev

  1. 在config/indx.js文件中添加
dev: {
   

    //
最低0.47元/天 解锁文章
蛮鱼
关注
专栏目录
vue+axios 开发环境与生产环境配置请求接口，本地开发和线上开发有多个请求地址怎么处理？上线后自动获取ip,不需改请求地址可运用多个项目中
skye_Z的博客
09-12 6463
1. 配置本地开发环境接口： 进入到项目目录config文件中index.js ；当页面有多个不同地址时此可以重定向，下图中会出现报错的就是路径问题， 创建所有httpUrl接口请求。举例后台请求地址为：192.168.11.12:80/omc/login  ,第一个/omc;页面请求地址写为/omc/login，请求地址为192.168.11.11：80/node/list   第二个/...
axios修改服务器地址,axios 生产环境和开发环境 ip 切换（修改文件配置）
weixin_42561192的博客
08-06 1697
前言往往在开发过程中，前端axios 连接的ip 地址 是内部服务器，甚至不止一个，可能有多个，那么在封装axios 工具的时候我们通常用这种方式constaxiosbaseurl=process.env.NODE_ENV===‘development‘?‘http://192.168.2.125:8890‘:‘http://192.168.2.126:8890‘const requs...
详解vue+axios给开发环境和生产环境配置不同的接口地址
12-02
为什么要配置不同的接口地址 在开发过程中，前端请求访问的是自己本机启动的后台服务，此时涉及到跨域（因为端口不一样），所以在config/index.js文件中配置了代理 //检查某个文件是否存在 try { fs.statSync(path.join(__dirname, '../proxy/' + templatedir + '.json')) //如果可以执行到这里那么就表示存在了 console.log(124) proxyTable = require('../proxy/' + templatedir + '.json') } catch (e) { //捕获异常' }
Vue axios 给开发环境和生产环境配置不同的接口地址
u014054437的博客
10-08 1万+
1.为什么要配置不同的接口地址 目前，由于我在开发过程中，前端请求访问的是我本机启动的后台服务，此时涉及到跨域（因为端口不一样），所以就在config/index.js文件中配置了代理，如下： 意思就是说凡是以api开头的请求，会帮我转到8089端口去获取数据。所以前端的请求都统一写成'api'+'接口名' 但是在生产环境下，我们不需要在接口前面加api发送请求，所以我们需要判断开发环境...
axios 为接口设置单独的地址
最新发布
pig_ning的博客
07-28 276
axios 为接口设置单独的地址
vue axios 给生产环境和发布环境配置不同的接口地址
Dreamer.
10-15 929
本项目是vue-cli搭建的项目框架，引入axios用于数据请求。配置不同的接口地址，（首先确保已经集成了axios，如对集成axios有疑问的道友，可参看我之间的一篇博客vue-cli 引入axios）操作如下 一、设置不同的接口地址 找到如下文件 /config/dev.env.js /config/prod.env.js 之后增加接口地址域名配置，增加后的文件内容如下: im...
Vue对象的数据属性赋值后，控制台输出的axios返回值与直接输出不同
瑞萌萌会跳折翼舞的博客
04-25 568
为什么axios的回调函数中，在输出返回值前，令this.数据 = 返回值，控制台输出就会不同呢？ ** 在axios的回调函数中，先令Vue对象中的数据属性 = 返回值** 直接输出
vue axios 解决跨域问题CORS
07-08
总结，解决Vue+axios跨域问题主要依赖于前端的代理配置和后端的CORS策略设置。在开发阶段，通过Vue CLI的proxy配置可以轻松地处理跨域；而在生产环境中，需要确保后端服务器正确设置了CORS策略，以允许前端的API请求...
vue配置开发环境和生产环境调用不同的域名以及跨域问题
qq_26282869的博客
01-11 1万+
注意: 这里vue项目与后端是前后端完全分离的,所有请求后端的地址是不一样的 安装axios npm install axios 然后 npm install --save axios vue-axios 用到post请求时，需要安装qs import qs from 'qs' 在main.js引入axios import axios from 'axios' import VueAxi...
vue 使用axios 并且实现开发环境的跨域
twinkle的博客
10-17 929
使用axios的不漏如下： 1.安装axios的包， npm install axios， vue-axios -S 2.把axios 封装到你想要的工具类中、 3.webpack.config.js 在dev server的环境下进行配置跨域 4.main.js 里面使用Vueaxios 和你在封装axios 里面导出的function或者是class 5.页面调用即可 代码如下图片: 1.安装...
vue 封装axios
weixin_53587375的博客
08-20 334
1.首先配置vue.config.js vue.config.js module.exports = { lintOnSave: false, //如果为false，就是取消eslint规则的检查 devServer: { overlay: { // 让浏览器 overlay 同时显示警告和错误 warnings: true, errors: true }, hot: true, host:
vue利用axios处理开发环境和生成环境的跨域问题
热门推荐
开心大表哥
12-04 2万+
1.跨域，是一个需要前后端一起解决的服务器问题，在vue-cli的webpack有解决这个问题的功能。 例如前端向后台服务器（http://localhost/echoIp/index.php）发送一个请求，然后将收到的数据打印到页面。 那么由于开发环境不在这个服务器上，所以就会产生跨域的问题。于是我们需要用到axios及修改配置文件。 请求页面的代码如下：created(){ thi
config--vue3环境配置文件 针对 axios
u014105655的博客
11-08 289
config--vue3环境配置文件 针对 axios--baseUrl
vue中使用axios给生产环境和开发环境配置不同的baseUrl
dengwei4048的博客
07-12 1229
第一步：设置不同的接口地址 找到文件：/config/dev.env.js 　　　　代码修改为： var merge = require('webpack-merge') var prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"',...
解决vue axios跨域请求
qq_33153761的博客
10-12 865
 在项目开发的时候，接口联调的时候一般都是同域名下，且不存在跨域的情况下进行接口联调，但是当我们现在使用vue-cli进行项目打包的时候，我们在本地启动服务器后，比如本地开发服务下是 http://localhost:8080 这样的访问页面，但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址，我们这样直接使用会存在跨域的请求，导致接口请求不成功，因此我们需...
axios 默认配置和实例配置
骐骥一跃，不能十步；驽马十驾，功在不舍。
11-12 5391
默认配置 在axios配置中存在baseUrl，header等配置，每次做的axios时，不一定所有的配置都要自己写，这时候要做一个默认值，例如： axios.defaults.baseURL ="http://localhost:8080" 之后调用如下post方法，请求的接口地址就是http://localhost:8080/user axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .
Vue项目开发环境中axios proxy跨域和ip访问异常的问题处理
arrow.light的博客
08-26 4429
一、问题背景 最近在学习Vue.js，用vue做了一个小项目，项目做完那一刻满心欢喜，打算让小伙伴们用手机浏览器打开项目网站开开眼，（注：用公司的华为防火墙做了nat，把办公电脑映射到公网中，即可打卡开发环境的服务器地址），好家伙，还没等我把地址发给小伙伴自己就先发现手机浏览器打开之后和数据渲染有关的页面都有异常。 二、问题描述 服务器电脑（ip：192.168.8.120）浏览器访问服务器地址（http://192.168.8.120:8080），报错cors跨域问题，如下： access-con
VueCli生产环境跨域配置与解决方法
"Vue CLI在生产环境中遇到跨域问题的解决方案" 在开发Web应用时，Vue CLI是一个非常方便的工具，它提供了快速搭建项目结构、自动化构建和优化等功能。然而，在开发环境中，由于浏览器的同源策略限制，我们通常会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值