【vue】前后端数据交互-axios的配置和使用

已于 2022-05-16 15:55:29 修改
阅读量1.4k 收藏 8
点赞数 1
分类专栏： vue 文章标签： vue.js 前端 javascript vue 前端框架
于 2022-03-18 17:28:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hanne_lovegood/article/details/123580512
版权
本文是Vue新手入门教程，介绍了如何配置和使用Axios进行前后端数据交互，包括下载Axios依赖、配置跨域代理、设置axios的baseUrl、编写请求接口的方法，以及解决遇到的错误问题，如404错误和类型错误。

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

Axios

2022/3/18 周五

vue新手入门，如有错误，欢迎在评论区指出，非常感谢！

1. 下载axios依赖

在package.json中的dependencies节点加

“axios”: “^0.20.0”,

然后执行命令npm install下载下来

2. 配置跨域代理

config/index.js中的proxyTable里，加后端的地址，配置允许跨域和通配符：

proxyTable: {
   
	'/api':{
   
	    target: `http://localhost:8080/`, // 后端地址
	    changeOrigin: true, // 允许跨域
	    pathRewrite: {
最低0.47元/天 解锁文章
搭建springboot+vue前后端分离项目---Axios的使用
m0_51514458的博客
08-30 1418
√
若依的使用（前端对axios的封装理解和基本使用、前端向后端传参的方式、开关原理（验证码开关、IP开关）、天气小案例）
weixin_54048131的博客
08-18 6109
本文章转载于公众号：王清江唷,仅用于学习和讨论，如有侵权请联系QQ交流群：298405437本人QQ：4206359。
为什么axios请求的端口是vue默认的端口_基于 ThinkPHP 5.0 + Vue + ElementUI 的前后端分离 CRM 系统...
weixin_39614011的博客
11-25 354
悟空CRM官网：http://www.5kcrm.com官网：http://www.72crm.com论坛：http://bbs.72crm.net演示地址：demo9.5kcrm.net (帐号：18888888888 密码：123456)主要技术栈后端框架：ThinkPHP 5.0.2前端 MVVM 框架：Vue.JS 2.5.x路由：Vue-Router 3.x数据交互：AxiosUI 框架...
若依源码对Axios封装和实现请求拦截，内置下载功能
最新发布
2303_78263863的博客
05-13 805
在项目中安装并封装Axios时，创建Axios实例的核心目的是通过配置隔离和逻辑解耦，提升代码的健壮性和可维护性。具体原因包括：1. 隔离配置：避免全局污染，不同服务可以独立配置baseURL、headers等参数；2. 独立拦截器管理：为不同实例绑定独立的请求/响应拦截器，避免冗余条件判断；3. 模块化与可维护性：按功能模块划分API，明确职责，便于维护和协作；4. 灵活应对不同场景：快速生成适配不同需求的客户端，如超时时间或Content-Type。创建实例后，通过请求/响应拦截器实现自动身份验证、统一
Vue axios请求自带域名，接口及项目名
hongfei130的博客
06-10 2012
标题 @TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示
vue3打包接口地址(ip)可配置，全局暴露接口地址(ip)
King的博客
06-17 2000
在vue3中打包后，设置接口地址(ip)可配置。
Axios的配置
weixin_52053631的博客
03-06 5039
Axios的配置
vue-axios-plugin-结合了axios和Vuejs的插件，使HTTP请求更加轻松。-Vue.js开发
05-27
关于`vue-axios-plugin`，还有一些高级用法和特性： - **配置全局默认设置**：你可以在注册插件时传入配置对象，覆盖axios的默认设置。例如，设置超时时间： ```javascript Vue.use(VueAxios, axios, { timeout: ...
解决跨域访问：vue-axios + vue3-axios Axiso解决跨域访问完整源码分享
11-05
Vue-axios 和 vue3-axios 是 Vue.js 框架与 Axios 集成的插件，使得在 Vue 组件中使用 Axios 更加方便。Vue-axios 主要针对 Vue2，而 vue3-axios 顾名思义，是为了配合 Vue3 的新特性和 API 设计的。 在 Vue 应用中...
vue-axios + vue3-axios Axiso解决跨域访问完整源码
02-16
Vue-axios 和 vue3-axios 是 Vue.js 框架与 Axios 集成的插件，使得在 Vue 组件中使用 Axios 更加方便。Vue-axios 主要针对 Vue2，而 vue3-axios 顾名思义，是为了配合 Vue3 的新特性和 API 设计的。 在 Vue 应用中...
axios配置多个接口请求(二)——vue项目axios配置多个IP地址，并进行请求数据
weixin_44867717的博客
09-05 1322
这样，你就可以轻松地在 Vue 项目中配置多个 IP 地址，并使用 Axios 发起请求到不同的 IP 地址。根据实际需求，你可以在配置文件中添加更多的 IP 地址，并在组件中根据需要使用它们进行请求。在上述示例中，通过导入 IP 地址的配置信息，你可以在需要发起请求的地方使用这些配置来构建请求的完整 URL。的形式，你可以将 IP 地址和具体的请求端点结合起来，从而发起请求到对应的 IP 地址。2、在需要发起请求的组件中，导入 Axios 和 IP 地址的配置信息。1、在项目中的某个适当的位置（例如，
若依之中对于axios的封装
06-09
若依框架 axios 若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的
配置域名、iP地址、Axios
qq_33183632的博客
04-26 3656
配置vue.config.js 1、在自己项目根目录下新建文件vue.config.js，将下面代码copy进去 vue.config.js module.exports = { runtimeCompiler: true, publicPath: '/', //设置打包路径 devServer: { host: 'test.cn', // 自定义域名，需要在hosts文件里配置 port: 8080, open: true, https: ..
关于vue部署正式环境处理ip和端口号
weixin_42199791的博客
10-31 6929
前因：在我们写vue的项目的时候会遇到一个就是本地开发和正式环境的ip和端口号不一致的问题，以及本地开发跨域问题？ 解决方法： 1.我们处理本地开发 在index.html proxyTable: { '/api': { //替换代理地址名称 target: 'http://192.168.101.102:8081/', //代理地址 chang...
修改Vue项目运行的IP和端口
见证自己学习,成长的记录
02-09 7427
我们在使用VsCode启动Vue项目的时候，我发现：默认的端口号好像和tomcat一样，默认都是8080，如果8080被占用了，就会使用8081,8082这样的方式以此类推。那么，我们是否可以像后端一样，通过修改port属性的方式达到修改运行端口的方式呢？其实还是很简单的。这个vue.config.js和springboot的application配置文件是一个道理，需要修改项目什么东西就直接在里面改。注意语法就好啦！以后遇到其他的配置语法，会持续更新！
axios中的超时问题（单独超时，全局超时）
qq_45599738的博客
05-04 2201
axios中的超时问题处理
axios的二次封装
weixin_44707050的博客
03-07 419
1.创建request.js用于封装axios； 2.引入axios import 'axios' from 'axios'; 3.设置全局配置,创建一个axios的实例 // 创建axios实例 const service = axios.create({ // axios中请求配置有baseURL选项，表示请求URL公共部分 baseURL: 'http://xxxxxxxxxx', // 超时 timeout: 10000 }); 3.设置axios请求拦
uniapp 使用axios
wcdunf的博客
06-30 2万+
uniapp vue axios
前后端项目分离之前端（vue项目）如何调用后端接口
热门推荐
Luomaomao_baby的博客
06-09 3万+
本文所用vue-cli是3.0版本的，所以首先需要创建一个vue.config.js文件，然后配置axios，就可以请求接口获取数据了。 1.main.js文件中： import axios from 'axios' Vue.prototype.$axios = axios axios.defaults.baseURL = '请求地址';//后端开发环境地址 axios.defaults.headers.post['Content-Type'] = 'application/json;charset
vue前后端数据交互axios
06-03
好的，关于Vue前后端数据交互，我们可以使用Axios库来发送请求和接收响应。 首先，我们需要在Vue项目中安装Axios库： ``` npm install axios --save ``` 然后在Vue组件中引入Axios： ```javascript import axios from 'axios' ``` 接着，我们可以在Vue组件中使用Axios发送HTTP请求： ```javascript axios.get('/api/users') .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) ``` 这里的`/api/users`是后端提供的API接口，我们可以通过Axios的`get`方法来发送GET请求，然后在`then`方法中处理响应数据，或在`catch`方法中处理错误信息。 同样，我们也可以使用Axios发送POST请求： ```javascript axios.post('/api/users', { name: '张三', age: 20 }) .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) ``` 这里的`/api/users`是后端提供的API接口，我们可以通过Axios的`post`方法来发送POST请求，然后在`then`方法中处理响应数据，或在`catch`方法中处理错误信息。 需要注意的是，在实际开发中，我们通常会将API请求封装成一个单独的模块或服务，方便我们在多个组件中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值