Angular Universal部署IIS后HTTPS访问报Cloudflare 520错误求助

问题描述 #

将Angular Universal应用部署到IIS并通过iisnode运行时，HTTP访问http://example.com一切正常，但HTTPS访问https://example.com触发Cloudflare 520错误（“Web服务器返回未知错误”）。尝试修改server.ts配置启用HTTPS，但因Cloudflare不提供私钥无法完成。

解决方案 #

1. 无需在Node层配置HTTPS #

Cloudflare作为反向代理，已在边缘完成HTTPS加密，你的服务器只需处理HTTP请求即可。Cloudflare会自动将用户的HTTPS请求转发到服务器的HTTP端口（默认80），因此server.ts无需启用HTTPS服务，保持当前的HTTP监听逻辑即可。

2. 配置IIS与Cloudflare转发规则 #

• IIS端：确保站点绑定HTTP协议（端口80），iisnode配置正确指向编译后的server.js文件。检查web.config中的iisnode设置，确认端口使用process.env['PORT']（iisnode会自动分配端口，无需硬编码）。
• Cloudflare端：
  • 将SSL/TLS模式设置为「灵活」（Cloudflare到用户端为HTTPS，到你的服务器为HTTP），若后续需要更严格的加密可切换为「完全」模式（需IIS配置HTTPS）。
  • 确认域名DNS记录处于「橙色云朵」状态（Cloudflare代理已启用）。
  • 检查防火墙规则，排除误拦截请求的情况。

3. 优化server.ts配置 #

在app()函数中添加信任代理配置，让Express识别Cloudflare转发的真实请求协议，避免Angular生成错误的URL：

export function app(): express.Express {
  const server = express();
  // 添加以下代码
  server.set('trust proxy', true);
  
  // 原有代码...
  const distFolder = join(process.cwd(), 'dist/projectName/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
  
  // ...其余代码保持不变
}

该配置会让Express读取Cloudflare传递的X-Forwarded-Proto请求头，识别出请求实际为HTTPS，确保Angular Universal生成的资源链接为HTTPS协议，避免混合内容问题。

4. 排查日志定位问题 #

若问题仍存在，查看以下日志定位具体错误：

• IIS日志：位于%systemdrive%\inetpub\logs\LogFiles目录
• iisnode日志：位于%systemdrive%\inetpub\logs\iisnode目录
  检查Node服务是否正常启动、请求是否到达服务器、是否有端口占用或权限问题。

原server.ts代码 #

import 'zone.js/node';

import { APP_BASE_HREF } from '@angular/common';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { existsSync, readFileSync } from 'fs';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { createServer } from 'https';

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/projectName/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run(): void {
  const port = process.env['PORT'] || 4000;

  ////////// HTTPS Test Server /////////////
  // const privateKey  = readFileSync('ssl/project.pem', 'utf8');
  // const certificate = readFileSync('ssl/project.crt', 'utf8');
  // const credentials = {key: privateKey, cert: certificate};
  // const httpsServer = createServer(credentials, app());

  // httpsServer.listen(port, () => {
  //   console.log(`Node Express server listening on https://localhost:${port}`);
  // });
  ////////////  END   ///////////////

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

内容的提问来源于stack exchange，提问作者Osama