在vue项目中,使用axios跨域处理


Posted in Javascript onMarch 07, 2018

跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无法自己独立的搭建一个服务器,所以就变成了一个尴尬的事情

当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,webpack正有这种功能,所以vue-cli也是有解决跨域的能力

当然,不可能我们直接发送ajax就成功,对吧,我们肯定要修改配置文件

在vue项目中,使用axios跨域处理

代码:

dev: {
		env: require('./dev.env'),
		port: 8080,
		autoOpenBrowser: false,
		assetsSubDirectory: 'static',
		assetsPublicPath: '/',
		proxyTable: {
			'/gp': {
				target: 'http://we7.qw1000.cn/',
				changeOrigin: true,
				pathRewrite: {
					'^/gp': '/'
				}
			}
		}
	}

这是一个通用模板,主要涉及到几个概念:

dev,自然是虚拟服务器的意思,

autoOpenBrowser

也不是多重要的属性,只是配置能不能自动打开浏览器,关键点在于

proxyTable: { 
  '/gp': { 
  target: 'http://we7.qw1000.cn/', 
  changeOrigin: true, 
  pathRewrite: { 
   '^/gp': '/' 
  } 
  }

配置了我们的对象服务器,让我们的虚拟服务去访问那个网站,当然,这也是webpack的功能,所以也是只能在开发环境下使用

接下里就是我们的ajax代码了。以post为例:

在vue项目中,使用axios跨域处理

methods: {
			hello: function(e) {
				var str;
				console.log(e.target.files[0]);
				var _this = this;
				var that = new FormData();
				that.append("myfile", e.target.files[0]);
				this.$http.post('gp/app/index.php?i=2&c=entry&do=tool/image&m=qw_deal', that)
					.then(function(sures) { console.log(sures);
						console.log("上产成功") })
					.catch(function(catchres) { console.log(catchres);
						console.log("上传失败") })
			}
		},

this.$http是什么鬼???

这自然是我们在main.js中引入了axios的结果,只不过我们不能直接使用use方法,因为他并不是vue的插件,所以需要将其加载到原型链中

import axios from 'axios';
Vue.prototype.$http = axios;

这样我们就可以直接使用了,

在vue项目中,使用axios跨域处理

这是我朋友那边的链接,而且我选择的是一个上传的图像文件的链接

注意点:

1.webpack的跨域解决方法只是是适合在开发环境中使用,

2.设置inde.js内部的dev时,请注意,需要设置的应该是域名,过多会失效,所以应该是www。baidu。com

3.使用axios上传文件,不需要像ajax上传图片一样使用formdata

以上这篇在vue项目中,使用axios跨域处理就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 #Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 #Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 #Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 #Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 #Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 #Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 #Javascript
You might like
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
php实现简易计算器
2020/08/28 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python3监控疫情的完整代码
2020/02/20 Python
python mysql中in参数化说明
2020/06/05 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
什么是方法的重载
2013/06/24 面试题
某同学的自我鉴定范文
2013/12/26 职场文书
个性与发展自我评价
2014/02/11 职场文书
应届生自荐信范文
2014/02/21 职场文书
美术专业自荐信
2014/07/07 职场文书
合作协议书范文
2014/08/20 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers