axios请求中跨域及post请求问题解决方案
闲话不多说,用到vue的童鞋们应该大部分都会遇到请求中的各种奇葩问题,昨天研究一天,终于搞出来个所以然了,写篇文章拯救一下广大的童鞋们,某度娘当然也可以搜到,但一般解决了一个问题后就会出现另外一个问题,一个接一个,不断的问题涌现在我的console里面。印象中,我应该遇到过403,405,302,这几个错误,403错误通常是因为跨域请求无权限,而405是因为方法不允许method not allowed,偶尔还会遇到302的错误。以下是我在换了无数次配置后的最好的解决方案了。
1.首先,本地请求测试环境的接口需要跨域,解决跨域问题当然用配置就解决了,找到config/index.js文件中的module.exports中的dev
proxyTable: {
'/api': {
target: 'https://api.douban.com',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '' //这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'https://api.douban.com/user/add',直接写‘/api/user/add’即可,此处的‘api’可以设置为自己想要设置的任何词语,符合规范即可
}
}
},
2.在vue的项目入口文件main.js中,引入我们所需要axios(已经封装好的ajax,也可以用fetch,但是兼容性不如axios好),同时需要引入qs模块(我们在做post请求的时候需要用到)
import axios from 'axios' // 引入axios
import qs from 'qs' // 引入qs
Vue.prototype.$http = axios;
Vue.prototype.HOST = '/api' // 此处可根据个人习惯设置 此处的‘api’ 跟index.js中的‘api’一致,则所有的请求只需要使用this.HOST即可
//添加请求拦截器
axios.interceptors.request.use(function (config) {
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
if(config.method === 'post') { // post请求时,处理数据
config.data = qs.stringify( {
...config.data //后台数据接收这块需要以表单形式提交数据,而axios中post默认的提交是json数据,所以这里选用qs模块来处理数据,也有其他处理方式,但个人觉得这个方式最简单好用
})
}
return config;
}, function (error) {
loadinginstace.close()
return Promise.reject(error);
})
//添加响应拦截器
axios.interceptors.response.use(function(response){
return response;
},function(error){
return Promise.reject(error);
});
3.在vue文件中的使用方法,get与post方法均可~
// 以下为请求测试环境的get接口测试
this.$http.get(this.HOST + '/init',{
params:{
"cityCode":"010"
}
}).then((response) => {
console.log("get:"+response.data);
});
// 以下为请求测试环境的post接口测试 处理数据这块儿,试用过很多种方法,没效果…… 例如 用字符串拼接,以及用params.append,亲测数据丢失,嗯,还是乖乖的用qs吧……
let url = this.HOST + '/mod';
let data = {
"savestatus":1,"favType":1,"tag":"danny"
};
this.$http.post(url,data).then((response) => {
console.log("post:"+response.data);
})
// 以下为请求本地json文件的方法,本地json文件必须放在最外层的static/xxx.json
this.$http.get("../static/datagrid_data1.json").then(response => {
console.log("static:"+response.data);
});
所有请求均成功!!!开森~~~ 撒花
以上就是整个axios的跨域以及post请求的解决方案。如果大家还有其他更好的建议,欢迎私信我补充,或者评论补充~~
原文地址:https://segmentfault.com/a/1190000014265711
axios请求中跨域及post请求问题解决方案的更多相关文章
- 前端MVC Vue2学习总结(六)——axios与跨域HTTP请求、Lodash工具库
一.axios Vue更新到2.0之后宣告不再对vue-resource更新,推荐使用axios,axios是一个用于客户端与服务器通信的组件,axios 是一个基于Promise 用于浏览器和 no ...
- Vuex、axios、跨域请求处理和import/export的注意问题
一.Vuex 1.介绍 vuex是一个专门为Vue.js设计的集中式状态管理架构. 对于状态,我们把它理解为在data中需要共享给其他组件使用的部分数据. Vuex和单纯的全局对象有以下不同: 1. ...
- Vue(项目踩坑)_解决vue中axios请求跨域的问题
一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...
- HTML中跨域请求天气粗略效果
HTML中跨域请求天气粗略效果 html+css部分: <style> table{ border:1px red solid; border-collapse: collapse; ma ...
- js中跨域请求原理及2种常见解决方案
一.同源策略: 说到跨域请求,首先得说说同源策略: 1995年,同源政策是由 Netscape 公司引入浏览器的.目前,所有浏览器都实行了这个政策. 同源策略是浏览器的一种安全策略,所谓同源是指,域名 ...
- 【笔记】vue-cli 开发环境中跨域连接后台api(vue-resource 跨域post 请求)
在vue-cli 项目中很多人会用到mock 数据(模拟数据),但是我觉得如果在真实的数据库交互中开发会更有安全感一些,所以查了一下百度很多人推荐的就是: 跨域! 跨域是什么概念?不同的主机名,同主机 ...
- WebApi中跨域请求的解决方案和原理
跨域请求仅发生在JavaScript发起Ajax请求时,浏览器对请求的限制,通常只允许访问同一个域中的资源,或者目标服务器明确的通知浏览器允许该域访问资源. 那么什么叫跨域的:主机地址或者ip地址或者 ...
- JSONP分享-- 在JavaScript中跨域请求
如果你正在开发一个现代的基于web的应用程序,那么你: 在客户端使用JavaScript. 需要集成那些没有完全在你控制之下的服务(或者那些来自不同的域). 在你的浏览器控制台中遇到过这个错误信息: ...
- Axios 执行post发送两次请求的小坑
vue-resource2.0已经不再更新,所以vue2.0官方推荐使用axios来代替.实际项目也是应用上了vue+axios,然后就有了这么一段填坑的经历. 问题:axios使用post请求时,发 ...
随机推荐
- Codeforces Round #325 (Div. 2) B. Laurenty and Shop 前缀+后缀
B. Laurenty and Shop ...
- 一次次迭代 百度语音生成 api 字幕 语音的同步性 关键
发音字符 数一样 D:\myv\semHAND9myuid1523961381.avi 0.7053863117786668 --------------- 深圳市雅超服饰有限公司是一家专业设计制作高 ...
- c++ 编译器会绕过拷贝构造函数
C++ primer P442 P447:在拷贝初始化过程中,编译器可以跳过拷贝构造函数,直接创建对象.即,编译器允许将下面的代码 "; //1 改写为 "); //2 由于str ...
- ConfigurationManager.AppSettings Property
在app.config文件中添加如下配置 <appSettings> <add key="Server" value="127.0.0.1"/ ...
- IOS系统控件高度
以下是常见的几种控件的高度.Statusbar,Navigationbar和Tabbar的宽度极其图标大小. 下表是更为详细的参数,包括了Statusbar,Navigationbar.Tabbar. ...
- 插入排序(1)——直接插入排序(insert sort)
假设有一组无序序列 R0, R1, ... , RN-1. (1) 我们先将这个序列中下标为 0 的元素视为元素个数为 1 的有序序列. (2) 然后,我们要依次把 R1, R2, ... , RN- ...
- 网络安全中机器学习大合集 Awesome
网络安全中机器学习大合集 from:https://github.com/jivoi/awesome-ml-for-cybersecurity/blob/master/README_ch.md#-da ...
- [App Store Connect帮助]一、 App Store Connect 使用入门(2)登录至 App Store Connect
请使用您的 Apple ID 登录 App Store Connect.如果您是具有“帐户持有人”职能的用户,请使用您用于加入“Apple 开发者计划”的 Apple ID 登录并添加其他用户至您的 ...
- Oracle数据库初学者入门教程
Oracle数据库是相对于其他数据库来说比较难的一个.Oracle Database,又名Oracle RDBMS,简称Oracle.是甲骨文公司推出的一款关系数据库管理系统.Oracle数据库系统是 ...
- easyui datagrid 页面详细使用
//加载数据workflowName onloadmyCgxList: function (id) { if (id != null && id != "" ...