CSS 无论如何都没有加载

Question

我正在 Ubuntu 中使用 PhpStorm 在节点服务器上工作。除 CSS 部分外，一切正常。无论如何它都没有加载。我手动打开了网站，但 CSS 部分不存在。我尝试使用 PyCharm 在 Django 服务器上打开它，但没有用。

我用外部 CSS link 创建了一个示例站点，但它也没有加载。我只是想不通问题出在哪里。

我正在使用 HTML5 带有 PhpStorm 中给出的默认页面的样板文件。

文件层次结构如下：

Website
 -css
   -main.css
   -normalize.css
   -custom.css
 -index.html

CSS Link

 <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).

Answer 1

尝试以大写地址加载 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">

Answer 2

尝试声明定义当前目录的 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">

Answer 3

“http://127.0.0.1:8000/WebApp/css/custom.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

答案就在这里：您的网络服务器在 Content-Type 响应 header 中发送 text/html 而不是预期的 text/css 和 X-Content-Type-Options: nosniff header 不允许浏览器 auto-fix 那个（这是一件好事，因为它可以防止漏洞：现在在开发环境中更好地检测和修复它，而不是以后在生产环境中可能出现的问题）。

并且您对 .js 个文件有完全相同的问题。

您需要修复您的网络服务器配置。它必须是 node.js 为这些文件提供服务的强大代码（据我从你的描述中了解到）。

CSS 无论如何都没有加载

CSS not loading anyhow

html

css

node.js

ubuntu

phpstorm