vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助。
跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无法自己独立的搭建一个服务器,所以就变成了一个尴尬的事情
当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,webpack正有这种功能,所以vue-cli也是有解决跨域的能力
当然,不可能我们直接发送ajax就成功,对吧,我们肯定要修改配置文件
代码: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为例:
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;
这样我们就可以直接使用了,
这是我朋友那边的链接,而且我选择的是一个上传的图像文件的链接
注意点:
1.webpack的跨域解决方法只是是适合在开发环境中使用,
2.设置inde.js内部的dev时,请注意,需要设置的应该是域名,过多会失效,所以应该是www。baidu。com
3.使用axios上传文件,不需要像ajax上传图片一样使用formdata
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
vue php axios 跨域,在vue项目中,使用axios跨域处理相关推荐
- java解决跨域问题_Java项目中如何解决跨域问题
Java项目中如何解决跨域问题 发布时间:2020-11-11 16:00:40 来源:亿速云 阅读:91 作者:Leah Java项目中如何解决跨域问题?很多新手对此不是很清楚,为了帮助大家解决这个 ...
- vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
- 【全栈项目上线(vue+node+mongodb)】06.nodejs服务上线(生产环境前后分离的vue项目中怎么解决跨域问题)...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务 克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
- 在vue项目中对axios进行封装
在vue项目中对axios进行封装 1.引入axios,qs模块 import axios from 'axios'; import Qs from "qs"; import st ...
- Vue学习笔记(二)—— vue项目中使用axios
一.文档链接 axios文档 vue开发插件 二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...
- 在vue项目中使用axios封装axios
基本使用 安装 // 项目中安装 npm install axios --S // cdn 引入 <script src="https://unpkg.com/axios/dist/a ...
- ssm把图片保存到项目中_项目中的图片跨域问题解决方式
现象 首先,在生产环境中,由于进行编辑图片时,将图片回显到ReactCrop组件中进行可裁剪编辑,然而回显时,需要将图片转化为base64的格式或者blob对象, 此时需要将图片次绘制成canvas进 ...
- axios nodejs 上传图片_vue项目中使用axios上传图片等文件操作
axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 ...
- 解决vue项目中的前端跨域问题
什么是跨域 正常情况下,我们使用ajax请求的数据都在自己的服务器上.但在一些特定的场景中,我们需要获取到别人的服务器上的数据,也就是在自己的服务器中的ajax要请求到别人的服务器的网址,这就是跨域. ...
最新文章
- Python学习之While--break
- PHP调用Webservice实例
- Scala入门示例反编译分析代码执行流程
- 生成和合入patch的两种方式
- ITK:将内核与位置上的图像相乘
- VTK:Points之ExtractEnclosedPoints
- 分享几段祖传的Python代码,拿来直接使用!
- SpringBoot2.x整合Redis实战 4节课
- 教育部:麻省理工学院2019年本科生未招收一名中国大陆的学生不属实
- pandas.Series.rank用法详解
- SERVER的蓝屏信息速查表--THREE
- base64编码格式
- 计算机桌面颜色突然变灰,Win10桌面颜色变为灰的两种解决方法
- acm:C语言程序设计:求圆柱的体积等,去除小数点后两位最后一位的四舍五入
- mysql_opt_reconnect mysql_ping_蛋疼的mysql_ping()以及MYSQL_OPT_RECONNECT
- 如何用 Node.js 爬虫?
- 2021年汽车驾驶员(初级)考试APP及汽车驾驶员(初级)考试软件
- Ubuntu20.04虚拟机使用Kubeadm从0到1搭建K8S集群(超详细)
- juyter显示决策树图形_在Jupyter Noteb中绘制交互式决策树
- 淘宝/天猫API接口数据调用情况