vue+axios post请求

淩亂°似流年 2022-04-10 13:19 312阅读 0赞

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