vue-cli中使用axios封装以及跨域问题

最新推荐文章于 2024-04-13 06:48:55 发布
最新推荐文章于 2024-04-13 06:48:55 发布
阅读量576 收藏 3
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43841806/article/details/103274708
本文介绍了如何在Vue-cli项目中安装和配置axios，包括创建axios的封装文件，设置baseUrl和跨域配置。同时，展示了如何在组件中引用封装后的axios请求方法，以便进行get和post操作。

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

axios介绍

Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库，用于浏览器和node.js中 ， API https://www.kancloud.cn/yunye/axios
  1. 浏览器中创建XMLHttpRequests
  2. 从node.js中创建http请求
  3. 支持Promise API
  4. 拦截请求和响应
  5. 转换请求数据和响应数据
  6. 取消请求
  7. 自动转换JSON数据
  8. 客户端支持防御XSRF

1. 在vue-cli中安装axios

  1. npm install axios -S
  2. npm install qs -S
  3. 安装后可以到pockage.json查看具体版本， -S是安装到项目中，模块会安装到项目中的node_model下

在这里插入图片描述

2. 在Vue-cli中进行axios的封装配置：

  1. 创建axios在项目中的路径及文件
    在src下面创建一个axios文件夹，在文件夹下面创建 api.js 和 request.js ,api.js是用来对axios的一些请求
    方式进行封装， request.js 是对axios进行了创建，请求前的一些拦截修改和响应内容的拦截修改。使用
    不用在main.js 中引入
    在这里插入图片描述

  2. 配置 request.js文件
    导入 axios 以及 qs依赖
    在这里插入图片描述
    创建axios并进行一些基础配置，
    在这里插入图片描述
    baseUrl 的值在 项目中的config/index.js进行配置，
    在这里插入图片描述
    其中 target 是目标网址的域名，并不是一个完整的路径，只是一个前缀，像本地 http://127.0.0.1:8080
    这种。 change0rigin 是否运行跨域请求

  3. 拦截请求进行配置，响应配置同理，根据需要进行配置
    在这里插入图片描述

  4. 把创建的axios给暴露出去 export default service;

封装api.js中的axios 请求

首先需要在api.js中把封装好的给引入进来
	![在这里插入图片描述](https://img-blog.csdnimg.cn/20191127144912770.png)

  1. get 请求
    在这里插入图片描述

  2. post请求
    在这里插入图片描述

在组件中进行引用
  1. 在需要使用的组件的把封装好的请求方式 按需引入
    在这里插入图片描述
  2. 进行使用
在methods 中对需要发送请求的函数前面使用 async 给变成异步方法

在这里插入图片描述
函数中进行调用封装的请求方法进行使用
在这里插入图片描述

小杨&
关注
Vue2基础（6）——vue-cli、element-ui、axios拦截器、proxy接口代理
SongD1114的博客
04-09 1933
Vue2基础vue-cli、element-ui、axios拦截器、proxy接口代理
Vue使用axios二次封装、解决跨域问题
最新发布
pan_junbiao的博客
09-21 2417
在项目中，axios 进行二次封装可以更加方便的使用 Ajax 请求，提高代码复用性和维护性。同时可以封装统一的请求与响应拦截处理。在实际开发过程中，浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后，官方推荐使用axios 来实现 Ajax 请求。axios 是一个基于 promise 的 HTTP 客户端。
Vue-cli简单的使用axios和开发环境下跨域
界之边缘的轮回
03-09 2189
官方说法：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 这里是英文文档和在kancloud上发现的中文文档 在vue项目下进行安装(这里用的是vue-cli创建的项目简单的使用示例) $ npm i axios 进入src/main.js引入axios import axios from 'axios' Vue.prototype...
Vue--vuecli4使用axios，及解决跨域问题
随便写写
03-23 5422
Vue–vuecli4使用axios，及解决跨域问题 使用版本 vue-cli 4.1.2 VScode 1.42.0 问题一、配置问题（根据此配置，可避免跨域问题） 我配置访问后台路径时，发现vue-cli4已经没有了config/index.js文件，只有一个vue.config.js 所以根据博客1.2.会出现找不到在那里配置的情况， 博客6.说明，可以在vue.config.js配置 ...
Vue Axios封装 和 跨域问题
2401_84093490的博客
04-13 1275
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**
axios的封装与解决跨域
weixin_51629637的博客
05-03 904
基于github网易云接口，实现axios的封装与解决跨域
关于跨域问题与axios的封装
takobee5411的博客
06-08 759
跨域与axios封装
浅谈在Vue-cli里基于axios封装复用请求
08-28
本文主要介绍了如何在Vue-cli中使用axios封装复用请求，实现请求的简洁化和复用。下面是对标题、描述、标签和部分内容的详细解释和知识点总结： 一、标题：浅谈在Vue-cli里基于axios封装复用请求 * 该标题表明了...
Vue-cli中axios封装与接口代理实战
在Vue-cli开发环境中，...总结来说，Vue-cli中的axios封装复用请求主要涉及安装axios库、配置接口代理、将axios挂载到Vue原型上以及创建封装后的便捷调用方法。通过这些步骤，可以有效地提升前端开发的效率和代码质量。
vue-cli3 配置axios跨域及封装
weixin_43893437的博客
06-05 6192
在根目录上创建一个vue.config.js文件 module.exports = { publicPath: './', outputDir: 'dist', lintOnSave: true, productionSourceMap: false, devServer: { host: '0.0.0.0', port:'8080', disableH...
vue简单封装axios以及跨域问题
qq_39900178的博客
07-07 533
1.新建js文件 2.添加代码 import axios from 'axios' let base = '' function request (url, params, type) { if (type == null || type === ' ') { type = 'post' } return axios({ method: type, url: `${base}${url}`, data: params, headers: {
【Axios学习 二】一文通透Axios跨域和封装
yzq0820的博客
10-28 2247
因为在Vue的开发阶段，基本都是用webpack打包编译，需要node环境本地运行，因而运行的域名为本地的localhost,这个时候调用后端接口就涉及到跨域的问题了。vue 的 proxyTable 是用于开发阶段配置跨域的工具，可以同时配置多个后台服务器跨越请求接口，其真正依赖的npm包是。在日常项目开发过程中，在和后台交互获取数据的时候，我们都需要使用到网络库，通常在vue的项目中 ，使用的是。在日常项目模块中，基于多人开发，当然可以在api.js的基础上，可以根据功能模块实现业务拓展延伸，比如。
Vue+axios如何解决跨域
m0_70547044的博客
07-30 1831
官方说就是一种特殊的网络服务，允许一个客户端通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接，一些网关、路由器等网络设备就具有网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，防止服务器被攻击。之间进行的数据交互，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。当后端接口的url和页面的url的端口，协议，域名有一个或多个不同时就会产生跨域。
Vue项目实战踩坑（vue-cli3+axios跨域问题）
zzuli_xiaomingke的博客
02-15 2368
Vue项目实战踩坑（vue-cli3+axios跨域问题） 下面简单介绍一下我们的后台部分，后台运行在本地，总体框架使用springboot，使用8088端口，满足简单的crud操作，下面开始vuei项目的初始化，首先在全局安装@vue/cli的情况下，进行项目的初始化 使用命令行工具进入到我们的项目目录，然后使用指令初始化项目 vue create vue-cli-2 具体的安装流程初次安装应...
vue的axios请求跨域处理
qq_35040085的博客
06-02 577
vue.config.js中。
vue-cli3 axios解决跨域问题
qq_38472535的博客
06-29 143
vue-cli3 axios解决跨域问题
vue-cli3解决axios跨域问题
陈同学的博客
03-05 4449
首先，你要有axios。。 npm安装完后，在main.js下引入一下 import Vue from 'vue'; import App from './App.vue'; import router from './router'; import axios from 'axios' //axios不支持Vue.use 可以添加原型使用 Vue.prototype.$axios = ...
axios解决跨域问题（vue-cli3.0）
wangchaoqi1985的博客
09-09 169
axios解决跨域问题（vue-cli3.0）
vue-cli3中配置axios及使用及解决跨域的问题
atu1111的博客
05-06 2304
vue-cli3中配置axios及使用   1.vue 安装 npm install axios ，在main.js里面就可以使用axiso如下配置： import axios from 'axios' Vue.prototype.$axios = axios axios.defaults.baseURL = 'http://10.81.36.96:8080';   2.vue页面，如下调用，不会出现跨域问题 methods: { async getArtInfo() {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值