Q&A

1、如何实现前端异常处理机制？

异常处理：

• 请求参数（data）格式错误，返回 HTTP 状态码（400）：提示错误消息
• 未身份验证或身份失效，返回 HTTP 状态码（401）：跳转到登录页（login）
• 已授权或不需要授权，但禁止访问，返回 HTTP 状态码（403）：跳转到 403 页
• 请求 URL 格式错误或访问接口路径不存在，返回 HTTP 状态码（404）：提示错误消息
• 请求 Method 格式错误，返回 HTTP 状态码（405）：提示错误消息
• 请求 Content-Type 格式错误，返回 HTTP 状态码（406）：提示错误消息
• 访问接口服务内部错误，返回 HTTP 状态码（5xx）：跳转到 500 页
• HTTPS 跨域请求，需浏览器设置的：新窗口打开异常连接
• 请求发出，但是没收到任何响应：走超时处理
• 网络错误：跳转到网络错误页（error）
• 接口返回值异常，比如有删减返回字段：通知前端修改逻辑

超时处理：

• 请求超过客户端指定的时间：终止请求
• 服务端设置的响应超时时间小于客户端设置的请求超时时间，返回 HTTP 状态码（408）：提示请求超时警告消息
• 访问间隔超过指定的时间，返回 HTTP 状态码（504）：跳转到登录页（login）

超时控制分为 请求超时 和 访问（响应）超时，对于请求超时，客户端设置：

axios.defaults.timeout= 30000; // 设置请求超时时间（ms）不超过半分钟

当指定请求超时的毫秒数，如果请求时间超过超时时间，就终止请求。

然而，访问超时可以通过设置 session 过期时间达到目的，创建的 session_id 通过设置 Cookie （或自定义头）在请求过程中携带，避免使用请求主体携带。

全局异常处理示例：

axios.interceptors.response.use(response => {
    // 2xx 进入
    return response.data;
}, error => {
    if (error.response) {
        // 请求被执行，服务器以状态码进行响应

        switch (error.response.status) {
            case 400:
                // 400（Bad Request）：请求参数（Data）格式错误；提示错误消息
                return message.error('请求参数（Data）格式错误（' + error.config.url + '）');
                break;
             case 401:
             case 504:
                // 401（Unauthorized）：未身份验证或身份失效；跳转到登录页
                // 504（Gateway Timeout）：响应超时，跳转到登录页
                // 在此处移出本地登录信息
                return window.location.href = '/login';
                break;
            case 403:
                // 403（Forbidden）：已授权或不需要授权，但禁止访问；跳转到 403 页
                return window.location.href = '/403';
                break;
            case 404:
                // 404（Not Found）：请求 URL 格式错误；提示错误消息
                return message.error('请求 URL 格式错误（' + error.config.url + '）');
                break;
            case 405:
                // 405（Method Not Allowed）：请求 Method 格式错误；提示错误消息
                return message.error('请求 Method 格式错误（' + error.config.url + '）');
                break;
            case 406:
                // 406（Not Acceptable）：请求 Content-Type 格式错误；提示错误消息
                return message.error('请求 Content-Type 格式错误（' + error.config.url + '）');
                break;
            case 408:
                // 408（Request Timeout）：请求超时；提示警告消息
                return message.warning('请求超时（' + error.config.url + '）');
                break;
        }

        let err = /^5\d{2}$/g;
        if ( err.test(error.response.status) ) {
            // 5xx: 接口内部错误；跳转到 500 页
            return window.location.href = '/500';
        }

    } else if (error.request) {
        // 请求被提出，但是没有收到任何回应
    } else {
        // 在设置请求时触发错误，发生了一些问题

        // 1）请求超过指定的时间：终止请求
        if (error.message === 'timeout of ' + error.config.timeout + 'ms exceeded') {
            return message.warning('请求超时，请刷新页面重新请求！');
        }
        // 2 ）网络错误
        if (error.message === 'Network Error') {
            return window.location.href = '/error';
        }
    }

    return Promise.reject(error);
});

2、如何之前授权机制？

可通过设置 Cookie 或 自定义请求头实现。

3、如何实现接口跨域且携带 Cookie（或自定义头）？

客户端设置：

axios.defaults.withCredentials = true;

服务端设置：

// web.config
<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://121.40.115.179:11111" />
        <add name="Access-Control-Allow-Credentials" value="true"/>
        <add name="Access-Control-Allow-Methods" value="POST, DELETE, PUT, GET, OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, Content-Length, Accept, Authorization, X-Requested-With" />
        <add name="Access-Control-Expose-Headers" value="Authorization" />
        <add name="Access-Control-Max-Age" value="360000"/>
        <add name="Cache-Control" value="no-cache" />
    </customHeaders>
</httpProtocol>

以上为 C# 设置，其他语言需要切换语法。