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-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