Cloudflare 在 Chrome 上显示 html 代码而不是网页

Question

我有一个 Angular 4 应用程序，我使用 docker 在 aws ec2 机器上部署了它。我正在使用 CloudFlare 来管理我的 DNS。

问题出在 Chrome 上，当我尝试刷新页面时，我没有显示网页，而是 returns html index.If 的代码] 我直接从机器上通过 IPV4 访问页面，应用程序工作正常。

在 Firefox/Safari 上一切正常。

这是我的 index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PageName</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif|Roboto" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="assets/menu/favicon.png">
    <link rel="manifest" href="./manifest.json">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
</head>
    <body>
        <div id="global_root">
            <app-root></app-root>
        </div>
    <script type="text/javascript" src="inline.bundle.js">
</script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

这些是来自 IPV4 的响应 headers：

Connection: keep-alive 
Date: Fri, 04 Jan 2019 14:25:56 GMT 
Server: nginx/1.15.7 
Transfer-Encoding: chunked
X-Powered-By: Express

这些是通过 cloudflare 的响应 headers：

cf-ray: 493e5f00093f9706-FRA 
date: Fri, 04 Jan 2019 14:24:51 GMT 
expect-ct: max-age=604800, 
report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct" 
server: cloudflare 
status: 200 
strict-transport-security: max-age=2592000; includeSubDomains 
x-content-type-options: nosniff 
x-powered-by: Express

Answer 1

您似乎没有设置 Content-Type header，Cloudflare 正在帮助将 X-Content-Type-Options: nosniff 添加到所有响应中，并且 Chrome 将其应用于文档，同时Firefox 和 Safari 不将其应用于文档（仅应用于样式表和脚本）。

默认情况下，Express 集 Content-Type: text/html; charset=UTF-8，所以可能会有一些奇怪的事情——你究竟是如何提供这份文件的？你可以尝试 res.type("html") 是明确的。

Cloudflare 在 Chrome 上显示 html 代码而不是网页

Cloudflare showing html code instead of web page on Chrome

frontend

google-chrome

cloudflare

angular