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

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

angular google-chrome

Angular Cloudflare在Chrome上显示html代码而不是网页,angular,google-chrome,frontend,cloudflare,Angular,Google Chrome,Frontend,Cloudflare,我有一个Angular 4应用程序，我使用docker在aws ec2机器上部署了它。我正在使用CloudFlare管理我的DNS 问题在于，当我尝试刷新页面时，Chrome会返回索引的html代码，而不是显示网页。如果我从机器上直接通过IPV4访问页面，则应用程序工作正常在Firefox/Safari上，一切正常这是我的index.html： <!doctype html> <html lang="en"> <head> <meta cha

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

问题在于，当我尝试刷新页面时，Chrome会返回索引的html代码，而不是显示网页。如果我从机器上直接通过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>

以下是通过cloudflare的响应标头：

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

看起来您没有设置

Content-Type

标题，Cloudflare为所有响应添加了

X-Content-Type-Options:nosniff

，Chrome将此应用于文档，而Firefox和Safari不将其应用于文档（仅适用于样式表和脚本）

Express set

内容类型：text/html；默认情况下，charset=UTF-8

，因此可能会有一些奇怪的事情-您是如何提供此文档的？您可以尝试显式地使用

res.type（“html”）

。

什么是HTTP响应头direct与cloudflare？响应头direct:

连接：保持活动日期：Fri，2019年1月4日14:25:56 GMT服务器：nginx/1.15.7传输编码：分块X-Powered-By:Express

通过cloudflare的响应头：

cf-ray:493e5f00093f9706 FRA日期：2019年1月4日星期五14:24:51 GMT预期ct:max age=604800，报告uri=”https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"服务器：cloudflare状态：200严格传输安全：最大年龄=2592000；includeSubDomains x-content-type-options:nosniff x-powered-by:Express

您如何提供此文档？我不熟悉angular cli。是的，移除nosniff解决了问题。谢谢请注意，如果未正确设置内容类型，可能会遇到字符编码问题。默认值是Latin-1，但您可能使用UTF-8，因此如果您使用ASCII以外的任何内容，就会出现问题。你最终应该解决这个问题。

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