最近在通過websocket開發(fā)客服聊天功能過程中，后端同學(xué)因?yàn)?a target="_blank">Apache服務(wù)器反向代理原因呢灶，需要在Nginx服務(wù)器和Apache的websocket連接接口后需要加一個(gè)標(biāo)識(shí)和措。
但是服務(wù)器的判斷需要前端來(lái)做判斷，這時(shí)我們?cè)跒g覽器里查看可以看到日常請(qǐng)求接口的返回頭
Response Headers中可以看到一個(gè)key叫 Server
image.png
但是前端想要獲取Response Headers中的對(duì)應(yīng)字段需要經(jīng)過后臺(tái)的配置才能取到
首先
后端在配置前端可以獲取的Headers字段權(quán)限:
'Access-Control-Expose-Headers' => 'Server'
這樣前端同學(xué)就可以request請(qǐng)求中獲取到對(duì)應(yīng)的字段(下放是在uniapp和pc端的獲取方法)
uni-app獲取服務(wù)器類型方法
uni.request({
url: Url + '/api/' + url,
method: method || 'GET',
header: header,
complete: (data) => {
// #ifdef H5 || APP-PLUS
uni.setStorageSync('SERVER_TYPE', data.header.server);
// #endif
// #ifdef MP
uni.setStorageSync('SERVER_TYPE', data.header.Server);
// #endif
}
},
})
注意
這里有個(gè)坑助被，在H5公眾號(hào)中都server可以正常獲取但是在MP（微信小程序）中就必須要大寫Server才能獲取到剖张，大家需要注意一下
PC端獲取方法
// 響應(yīng)攔截器
service.interceptors.response.use(
response => {
// 獲取服務(wù)器類型
sessionStorage.setItem("SERVER_TYPE", response.headers['server']); //這里的請(qǐng)求在移動(dòng)端是否需要大寫需要各位自己嘗試
}
);
