POST請求設置Content-Type
由於后端采用的是
form表單形式上送參數，需要設置Content-Type
axios設置如下
const _axios = axios.create(config);
_axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;';
api調用
import { request } from '@plugin/axios'
export const getEventDataList = data => {
return request ({
url: '/xxx/initialize',
method: 'post',
params: data
})
}
- 使用
chrome調試工具看
post請求，參數以query string的形式上送，request的headers無Content-Type參數，試過很多方法都不行
后來后端說參數應該在body上送,並且把參數轉成query string的形式就可以了
- 調用方式改為如下方式
import { request } from '@plugin/axios'
import qs from 'qs'
export const getEventDataList = data => {
return request ({
url: '/xxx/initialize',
method: 'post',
data: qs.stringify(data)
})
}
- 使用
chrome調試工具看，有Content-Type參數了，並且參數是以Form Data的形式上送，不再是query string
總結
post請求只有參數使用body上送設置Content-Type才能生效，post請求參數是以query string的形式上送，則無法設置Content-Type
POST請求上送數組采坑
服務的需要接收如下數據，其中
ids是數組，上送給后端，后端說取不到數據
{
data: 'sd',
ids: ["xxxxxxxx", "yyyyyyy"] //數組
}
直接上送json數據
export const bakData = data => {
return request({
url: '/xxx/bakdata',
method: 'POST',
data: data
})
}
使用
chrome調試工具查看，上送格式如下：
使用qs.stringify()序列化
export const bakData = data => {
return request({
url: '/xxx/bakdata',
method: 'POST',
data: qs.stringify(data)
})
}
使用
chrome調試工具查看，上送格式如下，服務的還是解析不了這種格式的數組
使用qs.stringify(params, {indices: false })序列化
export const bakData = data => {
return request({
url: '/xxx/bakdata',
method: 'POST',
data: qs.stringify(data, {indices: false })
})
}
使用
chrome調試工具查看，上送格式如下，服務的需要key同名數組，這種形式的數組解析成功了。
全局配置
對
post請求的data參數進行統一處理
import Vue from 'vue';
import axios from "axios";
import qs from 'qs'
let config = {
baseURL: process.env.NODE_ENV === 'development' ? '/mock' : process.env.VUE_APP_BASE_URL,
method: 'post',
timeout: 6 * 1000, // Timeout
validateStatus: function (status) {
return status === 200
},
// withCredentials: true, // Checsk cross-site Access-Control
};
const _axios = axios.create(config);
_axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
const request = config => {
if(config.method && config.method.toLowerCase() === 'post') {
config.data = qs.stringify(config.data, {arrayFormat: 'repeat'})
}
return _axios.request(config)
}
const post = (url, data, config) => {
if(data) {
data = qs.stringify(data, {arrayFormat: 'repeat'})
}
return _axios.post(url, data, config)
}
const get = (url, config) => {
return _axios.get(url, config)
}
export {
_axios as axios,
request,
post,
get
}
總結
axios默認有個paramsSerializer請求配置
// `paramsSerializer` 是一個負責 `params` 序列化的函數
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
處理數組有如下幾種形式：
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 'a=b,c'
所以qs.stringify(params, {indices: false })和qs.stringify(params, { arrayFormat: 'repeat' })都能達到效果
參考鏈接
axios無法獲取到響應頭字段
需求
后端在響應報文的headers返回X-Access-Token字段，前端獲取該字段的值，作為用戶登錄憑證
問題
通過調試發現，在瀏覽器能看到X-Access-Token字段確實返回了，但是在代碼中取不到。
解決
在CORS請求的情況下，瀏覽器默認只能訪問以下響應頭：
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
如果您希望客戶端應用程序能夠訪問其他標頭，則需要在服務器上設置Access-Control-Expose-Headers標頭：
Access-Control-Expose-Headers: X-Access-Token