vue 使用axios 并且实现开发环境的跨域

简介: vue 使用axios 并且实现开发环境的跨域
使用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.安装好axios 和vue-axios 后你的packjson.js 在生产环境下会有以下axios 和vue-axios这两个包:


20191017090556380.png


2. 封装axios, 就是创建一个axios 的实例,然后在里面配置跟路径,链接时间,还有你是否需要使用请求拦截器和结果拦截器:


20191017090803730.png


3.在webpack.config.js 里面配置DevServer.如下如图:


2019101709104925.png


这里的api 在你的根路径(我上面的HTTPHelper.js)一定要有,不然你到时候加载的时候会报404


4.在main.js 里面使用,这个就比较简单了。直接导入,然后Vue.use(xxx,xxx),


5.直接在你的页面上使用:(以login为例)


20191017091311930.png


结果如下:


20191017091910523.png

相关文章
|
5月前
|
资源调度 JavaScript
|
2月前
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
41 1
|
5月前
|
缓存 JavaScript 搜索推荐
|
5月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
293 4
|
5月前
axios允许跨域cookie
axios允许跨域cookie
46 3
|
6月前
|
JavaScript
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用
|
6月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
87 4
|
6月前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
103 0
vue配合axios连接express搭建的node服务器接口_简单案例
|
5月前
|
JavaScript API 开发工具
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
52 0

热门文章

最新文章

  • 1
    Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
    161
  • 2
    JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
    598
  • 3
    若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
    265
  • 4
    axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
    59
  • 5
    文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
    59
  • 6
    Request failed with status code 400,使用axios.post要发送参数,认真比对原项目,看看有没有忘记什么?
    137
  • 7
    vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
    175
  • 8
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    68
  • 9
    前后端数据交互,API风格组合式API和选项式API,setup是一个标识,组合式编写的意思,使定义count.value的值自增的写法,组合式API使用axios的写法,ref定义响应数据写法
    45
  • 10
    网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
    62