最近在通過(guò)websocket開發(fā)客服聊天功能過(guò)程中，后端同學(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

但是前端想要獲取Response Headers中的對(duì)應(yīng)字段需要經(jīng)過(guò)后臺(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)端是否需要大寫需要各位自己嘗試
       
    }
);

如有遇到問(wèn)題歡迎在評(píng)論區(qū)交流~