前端/uni-app中如何判断服务器类型?

GitHub地址

最近在通过websocket开发客服聊天功能过程中，后端同学因为Apache服务器反向代理原因，需要在Nginx服务器和Apache的websocket连接接口后需要加一个标识。

但是服务器的判断需要前端来做判断，这时我们在浏览器里查看可以看到日常请求接口的返回头
Response Headers中可以看到一个key叫 Server

但是前端想要获取Response Headers中的对应字段需要经过后台的配置才能取到

首先

后端在配置前端可以获取的Headers字段权限:

'Access-Control-Expose-Headers' => 'Server'

这样前端同学就可以request请求中获取到对应的字段(下放是在uniapp和pc端的获取方法)

uni-app获取服务器类型方法

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
        }
    },
})

注意

这里有个坑，在H5公众号中都server可以正常获取但是在MP（微信小程序）中就必须要大写Server才能获取到，大家需要注意一下

PC端获取方法

// 响应拦截器
service.interceptors.response.use(
    response => {
        // 获取服务器类型
        sessionStorage.setItem("SERVER_TYPE", response.headers['server']);  //这里的请求在移动端是否需要大写需要各位自己尝试
       
    }
);

如果有前端小伙伴需要学习商城开发的可以关注我的公众号伴少年 搜索源码或商城源码