在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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
vuex的使用步骤
Jan 06 Vue.js
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
Zerg兵种介绍
2020/03/14 星际争霸
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
Python手机号码归属地查询代码
2016/05/04 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
如何查看python关键字
2021/01/17 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
外贸专业求职信
2014/03/09 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
惊天动地观后感
2015/06/10 职场文书
干部考核工作总结
2015/08/12 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
员工给公司的建议书
2019/06/24 职场文书
导游词之日月潭
2019/11/05 职场文书