未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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

当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,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跨域处理就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。


您可能感兴趣的文章:详解在Vue中如何使用axios跨域访问数据vue使用axios跨域请求数据问题详解vue中axios解决跨域问题和拦截器的使用方法VUE axios发送跨域请求需要注意的问题完美解决axios跨域请求出错的问题

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 服务器浏览器数据VU沟通
tags: 跨域,axios,vue,console,http,log,dev,target,var,function,ajax
分页:12
转载请注明
本文标题:在vue项目中,使用axios跨域处理
本站链接:http://www.codesec.net/view/573564.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(69)