网站容错防护实操全指南：从规则配置到异常验证全流程可直接落地

前置环境准备

你需要提前准备以下环境，所有安装步骤可直接执行：

• Nginx 1.20+：Debian/Ubuntu执行sudo apt update && sudo apt install -y nginx，CentOS/RHEL执行sudo yum install -y nginx，Windows直接下载http://nginx.org/download/nginx-1.24.0.zip解压即可
• 前端项目：Vue/React/原生JS项目均可
• 后端项目：SpringBoot 2.7+版本优先

一、前端静态资源容错配置

1.1 静态资源加载失败自动降级

全局监听资源加载错误，自动替换为备用CDN资源或兜底占位资源，直接复制以下代码插入到项目入口HTML的head标签最顶部：

```javascript // 全局监听静态资源加载错误 window.addEventListener('error', (e) => { const target = e.target; // 处理JS加载失败 if (target.tagName === 'SCRIPT' && target.src) { // 替换为备用CDN地址 const backupSrc = target.src.replace('https://cdn-a.com', 'https://cdn-b.com'); if (target.src !== backupSrc) { const newScript = document.createElement('script'); newScript.src = backupSrc; document.body.appendChild(newScript); } } // 处理图片加载失败 if (target.tagName === 'IMG' && target.src) { target.src = 'https://cdn-b.com/default-placeholder.png'; } }, true); ```

1.2 路由与页面兜底配置

单页应用首先配置路由404兜底，避免用户访问不存在路径出现白屏，以Vue3为例：

```javascript // Vue3路由配置 const routes = [ // 其他业务路由 { path: '/:pathMatch(.)', name: 'NotFound', component: () => import('@/views/NotFound.vue') } ] ```

Nginx层面配置单页应用路由兜底，避免刷新页面出现404，完整server配置如下：

```nginx server { listen 80; server_name your-domain.com; root /var/www/your-project/dist; index index.html; 单页应用路由兜底 location / { try_files $uri $uri/ /index.html; } } ```

二、后端接口与服务容错配置

2.1 Nginx反向代理容错配置

在Nginx的location代理块中添加以下配置，实现接口超时自动重试、错误节点自动剔除：

```nginx location /api/ { proxy_pass http://backend_server/; 错误自动转发到下一个节点 proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504; 超时时间配置 proxy_connect_timeout 3s; proxy_send_timeout 5s; proxy_read_timeout 5s; 重试次数限制 proxy_next_upstream_tries 2; proxy_next_upstream_timeout 10s; } ```

2.2 后端服务熔断重试配置

SpringBoot项目引入Resilience4j组件实现熔断重试，首先添加Maven依赖：

```xml io.github.resilience4j resilience4j-spring-boot2 2.1.0 ```

在application.yml中添加完整配置：

```yaml resilience4j: retry: instances: apiRetry: max-attempts: 2 wait-duration: 100ms retry-exceptions: - java.net.SocketTimeoutException - org.springframework.web.client.ResourceAccessException circuitbreaker: instances: apiCircuit: failure-rate-threshold: 50 sliding-window-size: 10 minimum-number-of-calls: 5 wait-duration-in-open-state: 10000 permitted-number-of-calls-in-half-open-state: 3 ```

在需要容错的接口方法上添加注解，同时编写兜底方法：

```java // 原接口方法 @CircuitBreaker(name = "apiCircuit", fallbackMethod = "queryFallback") @Retry(name = "apiRetry") public List queryData(String param) { // 原有业务逻辑 } // 兜底方法，参数和返回值与原方法一致，最后加Throwable参数 public List queryFallback(String param, Throwable e) { // 直接返回本地预定义的默认数据 return Arrays.asList("默认数据1", "默认数据2"); } ```

2.3 前端接口请求兜底

在axios响应拦截器中添加异常兜底逻辑，避免接口报错导致页面白屏：

```javascript axios.interceptors.response.use( res => res, err => { // 接口报错时返回兜底数据 return Promise.resolve({ data: { code: 0, data: [], msg: '服务异常，返回兜底数据' } }) } ) ```

三、集群容错与降级开关配置

3.1 负载均衡健康检查配置

Nginx upstream配置被动健康检查，自动剔除故障节点，配置如下：

```nginx upstream backend_server { server 192.168.1.10:8080 max_fails=2 fail_timeout=10s; server 192.168.1.11:8080 max_fails=2 fail_timeout=10s; } ```

max_fails=2代表10秒内失败2次就把节点剔除10秒，超时后自动尝试恢复流量。

3.2 全局降级开关配置

Nginx配置全局降级开关，流量高峰或服务故障时一键切换到静态兜底页，配置如下：

```nginx http块中配置降级开关，1为开启降级，0为关闭 map $host $is_degrade { default 0; } server { 其他原有配置 if ($is_degrade = 1) { rewrite ^(.)$ /degrade.html break; } } ```

提前在站点根目录上传预先写好的degrade.html作为兜底静态页即可。

四、容错效果验证步骤

• 静态资源容错验证：修改某张图片的src为不存在的地址，看是否自动替换为兜底占位图；修改JS资源的CDN前缀为无效地址，看是否自动加载备用CDN资源，页面功能正常。
• 接口容错验证：停掉后端服务，发送接口请求，看前端是否正常展示兜底数据，没有白屏或原生报错提示。
• 集群容错验证：停掉集群中1台后端节点，连续发送10次请求，查看Nginx访问日志，所有请求返回状态码均为200，无502/503错误。
• 降级开关验证：将Nginx配置中$is_degrade的值改为1，执行nginx -s reload重载配置，刷新页面看是否直接返回degrade.html兜底页。

常见踩坑规避

• 禁止配置无限重试：重试次数最多设置2次，否则后端出现大面积超时的时候，重试流量会被放大，直接引发服务雪崩。
• 兜底资源不要和主资源共用同一条链路：备用CDN、兜底页建议存放在不同服务商的存储服务中，避免单链路故障导致兜底失效。
• 熔断兜底逻辑不要依赖外部服务：兜底数据必须是本地预定义的静态数据，不能再请求数据库或其他接口，避免加重后端负担。