vue+axios post请求
vue+axios post请求axios 全局默认配置axios.defaults.baseURL = 'https://api.example.com';axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;axios.defaults.headers.post['Content-Type'] = 'application/x
vue+axios post请求
axios 全局默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
默认情况下,axios将JavaScript对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。
axios 发送post请求
1. 浏览器
在浏览器中,您可以使用URLSearchParams API,如下所示:
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
注意: 所有浏览器都不支持URLSearchParams,但是有一个polyfill可用(确保polyfill全局环境)。
polyfill就是一个用在浏览器API上的shim(是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现).我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了。
axios 依赖本机要支持ES6 Promise实现。 如果您的环境不支持ES6 Promises,您可以使用polyfill。
或者,您可以使用qs插件地址库对数据进行编码(将axios发送的数据格式转换为form-data格式):
//npm install axios的时候默认会安装qs
// qs相关的问题请搜索"nodejs qs"或者看这里https://www.npmjs.com/package/qs
import qs from 'qs';
// 将请求数据转换为form-data格式
// 这里不用qs,用FormData也可以,不赘述
var data = qs.stringify({
currentPage: "0",
pageSize: "10",
type: "1",
});
axios.post('/url', data)
.then(function (response) {
})
.catch(function (error) {
});
2. Node.js
在node.js中,可以使用querystring模块(也可以使用qs库。),如下所示:
var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });
axios cookie
用axios发送post请求去登录,能成功返回数据,但是用作权限验证的cookie就是没有保存,经查阅,axios 默认不发送cookie,跨域也是一个原因,需要全局设置:文档地址
axios.defaults.withCredentials = true
axios跨域问题
Vue-cli proxyTable 解决开发环境的跨域问题
在vue-cli的config文件index.js里有一个参数叫proxyTable
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
'^/list': '/list'
}
}
}
changeOrigin参数接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。
相关资料:
API proxy
http-proxy-middleware
package
更多推荐
所有评论(0)