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

相关文章
|
6月前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
245 1
|
资源调度 JavaScript
|
缓存 JavaScript 搜索推荐
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
846 1
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
2047 4
axios允许跨域cookie
axios允许跨域cookie
167 4
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
302 0
vue配合axios连接express搭建的node服务器接口_简单案例
|
JavaScript API 开发工具
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
169 0