angular - 安全运行 Angular Universal

Question

我在运行 Angular Universal 开发服务器以进行动态服务器端渲染时遇到问题。在我的应用程序中，我向安全主机（https://...）发出了几个 http 请求，似乎每当我启动 Angular Universal 时，它都会由于混合协议而引发请求。在浏览器中对给定 API 发出相同的请求可以正常工作，并且我可以使用 ssl 运行客户端开发服务器而不会出现问题。

ERROR NetworkError
    at XMLHttpRequest.send (/Users/app/dist//server/main.js:137480:19)
    at Observable._subscribe (/Users/app/dist/project-name/server/main.js:104370:17)
    at Observable._trySubscribe (/Users/app/dist/project-name/server/main.js:99560:25)
    at Observable.subscribe (/Users/app/dist/project-name/server/main.js:99546:22)
    at DoOperator.call (/Users/app/dist/project-name/server/main.js:214456:23)
    at Observable.subscribe (/Users/app/dist/project-name/server/main.js:99541:31)
    at CatchOperator.call (/Users/app/dist/project-name/server/main.js:105922:23)
    at Observable.subscribe (/Users/app/dist/project-name/server/main.js:99541:31)
    at scheduleTask (/Users/app/dist/project-name/server/main.js:141017:32)
    at Observable._subscribe (/Users/app/dist/project-name/server/main.js:141055:13)

跟踪中的最后一项指向混合协议错误/抛出server/main.js，但除此之外，该错误并没有透露太多。

我假设这是因为 Angular Universal 正在连接一个不安全的端口并且 API 请求失败，但是无论出于何种原因，即使在修改server.ts文件之后它仍然不想通过 https 连接。

在对我的server.ts文件进行更改以支持 https 之后，这就是我所拥有的（通过 openssl 为 localhost 生成的证书）。在此之前，我使用的是 Angular Universal 提供的默认样板。

export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/project-name/browser');
  const indexHtml = existsSync(join(distFolder, 'main.original.html')) ? 'main.original.html' : 'main';

  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

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

  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  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;

  
  const server = app();

  let sslOptions = {
    key: fs.readFileSync('server.key'),
    cert: fs.readFileSync('server.cert')
  };

  https.createServer(sslOptions, server).listen(port)
}

内angular.json：

"serve-ssr": {
    "builder": "@nguniversal/builders:ssr-dev-server",
    "options": {
        "ssl": true,
        "browserTarget": "project-name:build",
        "serverTarget": "project-name:server"
    },
    "configurations": {
        "production": {
            "browserTarget": "project-name:build:production",
            "serverTarget": "project-name:server:production"
        }
    }
},

每当启动发生时，我都会收到消息** Angular Universal Live Development Server is listening on http://localhost:4200, open your browser on http://localhost:4200 **，但 http 或 https 请求都没有得到响应。

任何帮助，将不胜感激！

标签： angularexpressangular-universal