闲话不多说,用到vue的童鞋们应该大部分都会遇到请求中的各种奇葩问题,昨天研究一天,终于搞出来个所以然了,写篇文章拯救一下广大的童鞋们,某度娘当然也可以搜到,但一般解决了一个问题后就会出现另外一个问题,一个接一个,不断的问题涌现在我的console里面。印象中,我应该遇到过403,405,302,这几个错误,403错误通常是因为跨域请求无权限,而405是因为方法不允许method not allowed,偶尔还会遇到302的错误。以下是我在换了无数次配置后的最好的解决方案了。

1.首先,本地请求测试环境的接口需要跨域,解决跨域问题当然用配置就解决了,找到config/index.js文件中的module.exports中的dev

axios基于常见业务场景的二次封装


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请求问题解决方案的更多相关文章

  1. 前端MVC Vue2学习总结(六)——axios与跨域HTTP请求、Lodash工具库

    一.axios Vue更新到2.0之后宣告不再对vue-resource更新,推荐使用axios,axios是一个用于客户端与服务器通信的组件,axios 是一个基于Promise 用于浏览器和 no ...

  2. Vuex、axios、跨域请求处理和import/export的注意问题

    一.Vuex 1.介绍 vuex是一个专门为Vue.js设计的集中式状态管理架构. 对于状态,我们把它理解为在data中需要共享给其他组件使用的部分数据. Vuex和单纯的全局对象有以下不同: 1. ...

  3. Vue(项目踩坑)_解决vue中axios请求跨域的问题

    一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...

  4. HTML中跨域请求天气粗略效果

    HTML中跨域请求天气粗略效果 html+css部分: <style> table{ border:1px red solid; border-collapse: collapse; ma ...

  5. js中跨域请求原理及2种常见解决方案

    一.同源策略: 说到跨域请求,首先得说说同源策略: 1995年,同源政策是由 Netscape 公司引入浏览器的.目前,所有浏览器都实行了这个政策. 同源策略是浏览器的一种安全策略,所谓同源是指,域名 ...

  6. 【笔记】vue-cli 开发环境中跨域连接后台api(vue-resource 跨域post 请求)

    在vue-cli 项目中很多人会用到mock 数据(模拟数据),但是我觉得如果在真实的数据库交互中开发会更有安全感一些,所以查了一下百度很多人推荐的就是: 跨域! 跨域是什么概念?不同的主机名,同主机 ...

  7. WebApi中跨域请求的解决方案和原理

    跨域请求仅发生在JavaScript发起Ajax请求时,浏览器对请求的限制,通常只允许访问同一个域中的资源,或者目标服务器明确的通知浏览器允许该域访问资源. 那么什么叫跨域的:主机地址或者ip地址或者 ...

  8. JSONP分享-- 在JavaScript中跨域请求

    如果你正在开发一个现代的基于web的应用程序,那么你: 在客户端使用JavaScript. 需要集成那些没有完全在你控制之下的服务(或者那些来自不同的域). 在你的浏览器控制台中遇到过这个错误信息: ...

  9. Axios 执行post发送两次请求的小坑

    vue-resource2.0已经不再更新,所以vue2.0官方推荐使用axios来代替.实际项目也是应用上了vue+axios,然后就有了这么一段填坑的经历. 问题:axios使用post请求时,发 ...

随机推荐

  1. express的路由

    就是 app.get().app.post().app.all()啦,啦啦啦 (其中,var express = require("express"); var app = exp ...

  2. C++ 函数模板与类模板(使用 Qt 开发编译环境)

    注意:本文中代码均使用 Qt 开发编译环境,如有疑问和建议欢迎随时留言. 模板是 C++ 支持参数化程序设计的工具,通过它可以实现参数多态性.所谓参数多态性,就是将程序所处理的对象的类型参数化,使得一 ...

  3. C语言strdup()函数:复制字符串【转】

    本文转载自:http://c.biancheng.net/cpp/html/166.html 头文件:#include <string.h> 定义函数:char * strdup(cons ...

  4. SVG可伸缩矢量图形

    SVG可伸缩矢量图形 总结 1.svg就像普通标签那么使用 2.svg是xml 3.svg是矢量图,而canvas是位图 学习要点 对HTML5中的SVG有初步的了解 什么是SVG 简单的说SVG文档 ...

  5. XAML实例教程系列 - 事件(Event) 五

    Kevin Fan分享开发经验,记录开发点滴 XAML实例教程系列 - 事件(Event) 2012-06-19 01:36 by jv9, 1727 阅读, 7 评论, 收藏, 编辑 Events, ...

  6. E20170925-hm

    arc  n. 综合症状; 弧(度); 天穹; 电弧,弧光.; vi. 形成拱状物; 循弧线行进; wrap  vt. 包; 缠绕; 用…包裹(或包扎.覆盖等); 掩护;            n. ...

  7. [App Store Connect帮助]三、管理 App 和版本(3)查找 App

    在“我的 App”中,使用工具栏控件快速查找 App. 搜索 App: 在搜索栏中输入文本. 您可以输入 App 的名称.Apple ID(App 标识符).套装 ID,或 SKU.套装 ID 和 S ...

  8. [Swift通天遁地]四、网络和线程-(5)解析网络请求数据:String(字符串)、Data(二进制数据)和JSON数据

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. 什么是JavaScript对象?

    对象是JavaScript的基本数据类型.对象是一种复合值:它将很多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值.对象也可看做是属性的无序集合,每个属性都是一个名/值对.属性名是字符串,因 ...

  10. oracle学习笔记(二十) 子程序——函数与触发器

    子程序--函数 语法 之前select语句中使用的函数,都是SQL内置函数,我们可以通过自定义函数更满足我们的需要. 自定义函数的语法和存储过程差不多. create [or replace] $fu ...