Vue-cli3.x中使用Axios发送跨域请求的配置方法

安装axios

npm i axios -s

main.js中引入

import axios from 'axios'//将axios挂载在Vue扩展上Vue.prototype.$http=axios//在其他地方使用只需使用 this.$http来代替axios;//配置baseUrlaxios.defaults.baseURL = '/api'

vue.config.js配置
在devServer中加入

proxy: {'/api': {target: 'http://localhost:8888/EasyPicker',//请求的目标地址的BaseURLchangeOrigin: true, //是否开启跨域pathRewrite: {'^/api': '' //规定请求地址以什么作为开头}}}

配置完成后如下

module.exports = {configureWebpack: {devServer: {proxy: {'/api': {target: 'http://localhost:8888/EasyPicker',changeOrigin: true, //是否跨域pathRewrite: {'^/api': '' //规定请求地址以什么作为开头}}}}}}

完成上述配置后差不多算大功告成了,下面是请求示例

demo1:
- 如果我们要发送请求的路径为 http://localhost:8888/EasyPicker/user/login
- 配置完成后的请求方式为(关于axios更具体的用法请参照中文文档)
- ```
this.$http("/user/login",{username:"admin",password:"123456"
})
```
- 控制台发送的请求截图
- 显示的路径为 ↓
- http://localhost:8088/api/user/login
- 实际请求路径为↓
- http://localhost:8888/EasyPicker/user/login

通过上述简单的配置即可完成跨域请求的发送,前后端分离开发中非常实用的技巧

转载于:https://www.cnblogs.com/roseAT/p/11150600.html

Vue-cli3.x中使用Axios发送跨域请求的配置方法相关推荐

vue中使用axios跨域请求
vue中使用axios请求API或其他域名地址时,会产生跨域请求问题,应该如何解决呢?(本文以请求API为例) 解决方法: 1.为axios设置请求头.拦截器等,这里直接对axios进行封装,将其封装 ...
vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
Vue（八）发送跨域请求
使用vue-resource发送跨域请求 axios不支持跨域 1 安装vue-resource并引入 cnpm install vue-resource -S 2 基本用法使用this.$http ...
php 设置跨域axios,vue2.0中proxyTable用axios进行跨域请求的设置方法
vue2.0设置proxyTable使用axios进行跨域请求的方法这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装ax ...
vue-cli3中解决axios跨域问题（以360壁纸为例）
vue-cli3中解决axios跨域问题(以360壁纸为例) 一.先在vue项目文件夹里的根目录中新建 vue.config.js文件(与package.json同一级) 二.在 vue.config ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
解决vue axios跨域请求发送两次问题
解决vue axios跨域请求发送两次问题参考文章: (1)解决vue axios跨域请求发送两次问题 (2)https://www.cnblogs.com/wordblog/p/12171875. ...
axios代理跨域 cli4_vuecli 3.0之跨域请求代理配置及axios路径配置莫小龙
vue-cli 3.0之跨域请求代理配置及axios路径配置问题:在前后端分离的跨域请求中,报跨域问题配置: vue.config.js: module.exports = { runtimeCo ...

Vue-cli3.x中使用Axios发送跨域请求的配置方法

Vue-cli3.x中使用Axios发送跨域请求的配置方法

Vue-cli3.x中使用Axios发送跨域请求的配置方法相关推荐

最新文章

热门文章