问题描述
我正在Ubuntu中使用PHPStorm在节点服务器上工作。除了CSS部分，其他所有东西都可以正常工作。无论如何，它没有加载。我手动打开了站点，但CSS部分不存在。我尝试使用PyCharm在Django服务器上打开它，但没有用。
我使用外部CSS链接创建了一个示例站点，但该站点并未加载。我只是不知道问题出在哪里。
我正在将HTML5样板与PHPStorm中提供的默认页面一起使用。
文件层次结构如下：
Website
-css
-main.css
-normalize.css
-custom.css
-index.html
CSS链接
<head>
<Meta charset="utf-8">
<title>WebAPP</title>
<Meta name="description" content="">
<Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<!--Local css-->
<link href="css/custom.css" rel="stylesheet" type="text/css">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<Meta property="og:title" content>
<Meta property="og:type" content="">
<Meta property="og:url" content="">
<Meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<!--Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5paxtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<Meta name="theme-color" content="#fafafa">
</head>
这是浏览器网络面板中的错误
The resource at “<URL>” was blocked because content blocking is enabled. 2
The resource from “http://127.0.0.1:8000/WebApp/js/main.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
The resource from “http://127.0.0.1:8000/WebApp/css/custom.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
The resource from “http://127.0.0.1:8000/WebApp/css/normalize.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
The resource from “http://127.0.0.1:8000/WebApp/css/main.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
The resource from “http://127.0.0.1:8000/WebApp/js/vendor/modernizr-3.11.2.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
Loading Failed for the <script> with source “http://127.0.0.1:8000/WebApp/js/vendor/modernizr-3.11.2.min.js”. WebApp:35:1
The resource from “http://127.0.0.1:8000/WebApp/js/plugins.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
Loading Failed for the <script> with source “http://127.0.0.1:8000/WebApp/js/plugins.js”. WebApp:36:1
GEThttp://127.0.0.1:8000/WebApp/js/main.js
[HTTP/1.1 404 Not Found 6ms]
The resource from “http://127.0.0.1:8000/WebApp/js/main.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
Loading Failed for the <script> with source “http://127.0.0.1:8000/WebApp/js/main.js”. WebApp:37:1
GEThttp://127.0.0.1:8000/WebApp/icon.png
[HTTP/1.1 404 Not Found 0ms]
GEThttp://127.0.0.1:8000/favicon.ico
[HTTP/1.1 404 Not Found 0ms]
The resource from “http://127.0.0.1:8000/WebApp/css/custom.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
The resource from “http://127.0.0.1:8000/WebApp/css/normalize.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
The resource from “http://127.0.0.1:8000/WebApp/css/main.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
解决方法
尝试以大写地址加载CSS。
<!--Local CSS-->
<link href="CSS/custom.css" rel="stylesheet" type="text/css">
<link href="CSS/normalize.css" rel="stylesheet" type="text/css">
<link href="CSS/main.css" rel="stylesheet" type="text/css">
尝试声明定义当前目录的CSS路径：
<!--Local CSS-->
<link href="./css/custom.css" rel="stylesheet" type="text/css">
<link href="./css/normalize.css" rel="stylesheet" type="text/css">
<link href="./css/main.css" rel="stylesheet" type="text/css">
“http://127.0.0.1:8000/WebApp/css/custom.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
您已经找到答案了：您的网络服务器在text/html响应标头中发送Content-Type而不是预期的text/css，并且X-Content-Type-Options: nosniff标头不允许浏览器自动修复（这是一件好事，因为它可以防止漏洞：与在以后的生产中可能出现的问题相比，现在可以更好地在开发环境中检测并修复此漏洞。
与.js文件完全一样的问题。
您需要修复您的Web服务器配置。必须是由node.js驱动的代码才能提供这些文件（据我从您的描述中了解）。