Angular 10 应用程序中的随机 400 错误请求来自服务工作者错误

如何解决Angular 10 应用程序中的随机 400 错误请求来自服务工作者错误

我在 PCF 中托管了一个 Angular 10 应用程序。 Nginx 用作反向代理，并实施了 SSL 和 DNS。

我们的网站每天有近 3k+ 用户，但每天大约有 20-30 名用户抱怨空白页面错误

注意：这主要发生在 Chrome 中，我尝试从我的代码中禁用 Service Worker，但没有成功。它随机发生，一旦浏览器缓存被清除，网站就会开始正常工作。我无法在我的系统中重现该问题。

错误信息：

网络：

控制台：

这是抛出 400 Bad Request (from Service worker) 的请求头

请求网址

https://xxx.xxx.com/search
Request Method: GET
Status Code: 400 Bad Request (from service worker)
Referrer Policy: strict-origin-when-cross-origin

响应头

Connection: keep-alive
Content-Length: 620
Content-Type: text/html
Date: Thu,06 May 2021 04:46:34 GMT
Server: Tengine/2.1.0

请求标头

Provisional headers are shown
sec-ch-ua: " Not A;Brand";v="99","Chromium";v="90","Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/90.0.4430.93 Safari/537.36

我的 Nginx 配置如下所示：

worker_processes  1;
error_log  /u01/enginex_1/logs/error.log;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/json;
    sendfile        on;
    keepalive_timeout  65;
    upstream ui_page{
        server xx.xxx.xxx.xxx:xxx1;
        server xx.xxx.xxx.xxx:xxx2;
    }
    server {
        listen       xxx1;
        server_name  xx.xxx.xxx.xxx;
        location / {
            set $remaddr $upstream_addr;
            if ($upstream_addr != "xx.xxx.xxx.xxx") {
              set $remaddr xxx.xxx.com;
            }
            proxy_pass https://$remaddr;
            proxy_intercept_errors on;
            recursive_error_pages on;
            error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 420 422 423 424 426 428 429 431 444 449 450 451 500 501 502 503 504 505 506 507 508 509 510 511 = @handle_redirect;   
        }
        location @handle_redirect {
            set $saved_redirect_location xxx1.xxx.com;
            proxy_pass https://$saved_redirect_location;
            proxy_intercept_errors on;
            recursive_error_pages on;
            error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 420 422 423 424 426 428 429 431 444 449 450 451 500 501 502 503 504 505 506 507 508 509 510 511 = @handle_redirect_err;
        }
        location @handle_redirect_err {
            try_files $uri $uri/error.html = 404;
        }
    }
    server {
        listen       xxx2;
        server_name  xx.xxx.xxx.xxx;
        location / {
            set $remaddr $upstream_addr;
            if ($upstream_addr != "xx.xxx.xxx.xxx") {
              set $remaddr xxx1.xxx.com;
            }
            proxy_pass https://$remaddr;
            proxy_intercept_errors on;
            recursive_error_pages on;
            error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 420 422 423 424 426 428 429 431 444 449 450 451 500 501 502 503 504 505 506 507 508 509 510 511 = @handle_redirect;   
        }
        location @handle_redirect {
            set $saved_redirect_location xxx.xxx.com;
            proxy_pass https://$saved_redirect_location;
            proxy_intercept_errors on;
            recursive_error_pages on;
            error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 420 422 423 424 426 428 429 431 444 449 450 451 500 501 502 503 504 505 506 507 508 509 510 511 = @handle_redirect_err;
        }
        location @handle_redirect_err {
            try_files $uri $uri/error.html = 404;
        }
    }
    server {
        listen         yyyy;
        server_name    xx.xxx.xxx.xxx;
        large_client_header_buffers 4 32k;
        location / {
            proxy_pass http://ui_page;
        }
        
    }
    server {
        listen       zzzz ssl;
        server_name   xx.xxx.xxx.xxx;
        large_client_header_buffers 4 32k;
        ssl_certificate      /xxxx.pem;
        ssl_certificate_key  /xxxx.key;
        location / {
            proxy_pass http://ui_page;
        }
    }
}

ngsw-config.json

  {
    "$schema": "./node_modules/@angular/service-worker/config/schema.json","index": "/index.html","assetGroups": [
        {
            "name": "app","installMode": "prefetch","resources": {
                "files": [
                    "/favicon.ico","/manifest.webmanifest","/*.css","/*.js"
                ]
            }
        },{
            "name": "assets","installMode": "lazy","updateMode": "prefetch","resources": {
                "files": [
                    "/assets/**","/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
                ],"urls": ["https://fonts.googleapis.com/**"]
            }
        }
    ]
}

server.js

/*jshint node:true*/
'use strict';
var express = require('express');
var compression = require('compression');
var app = express();
app.use(compression());
// var serveStatic = require('serve-static')
var path = require('path');

var port = process.env.PORT || 3000;
app.use(express.static('.'));
// app.use(serveStatic(express.static('dist')));
// app.use("/*",express.static("index.html"));
app.get('/*',function(req,res,next) {
  //Path to your main file
  res.setHeader('X-UA-Compatible','IE=Edge');
  res.status(200).sendFile(path.join(__dirname + '/index.html'));
});
console.log('About to crank up node');
app.listen(port,function() {
  console.log('Express server listening on port ' + port);
});

package.json

 {
  "name": "ui-server","version": "1.0.0","description": "server to run ui","main": "app.js","scripts": {
    "start": "node --max-http-header-size=81000 server.js","test": "echo \"Error: no test specified\" && exit 1"
  },"author": "chan","license": "ISC","dependencies": {
    "compression": "^1.7.3","express": "^4.14.0","serve-favicon": "^2.3.2"
  },"engines": {
    "node": ">=10.0.0","npm": ">=6.0.0"
  }
}

提前致谢。