尝试将自定义 CSS 样式表添加到 HTML 文档时，不允许加载本地资源错误答案

【问题标题】：Not allowed to load local resource error when trying to add custom CSS stylesheet to HTML document尝试将自定义 CSS 样式表添加到 HTML 文档时，不允许加载本地资源错误
【发布时间】：2021-09-29 09:25:58
【问题描述】：

我正在用 Django、Bootstrap、HTML 和 CSS 编写一个项目。我找到的代码提供了一个引导样式表。当我在开发人员服务器127.0.0.1:8000 上运行程序时，将应用引导样式。我正在尝试使用自定义样式将样式表添加到我的 HTML 文件中。当我尝试运行项目时，我在 Chrome 控制台中收到此信息：

不允许加载本地资源：file:///C:/Users/Keith/OneDrive/DjangoProjects/django_forms/myapp/templates/formstyles.css"

form.html 如下：

{% load crispy_forms_tags %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="C:/Users/Keith/OneDrive/DjangoProjects/bootstrap-5.0.2-dist/bootstrap-5.0.2-dist/css/bootstrap.min.css"> -->
    <link rel="stylesheet" type="text/css" href="C:\Users\Keith\OneDrive\DjangoProjects\django_forms\myapp\templates\formstyles.css">
</head>
<body style="padding: 20px;">
{% crispy form form.helper %}
    
</body>
</html>

自定义CSS样式表formstyles.css如下：

input {
    color: #683aa4 !important;
    margin-top: 100px !important;
}

HTML文件和CSS文件在同一个目录

谢谢你，

【问题讨论】：

标签： html css django bootstrap-4 django-crispy-forms

【解决方案1】：

出于安全原因，在某些情况下，浏览器可能会禁止直接从您的计算机加载文件。通过 Web 服务器访问本地文件有时就是其中之一。因此，尝试将样式表放在您的 Web 服务器目录中，以便 URL 如下所示，或类似的内容：

<link rel="stylesheet" href="127.0.0.1/bootstrap-5.0.2-dist/bootstrap-5.0.2-dist/css/bootstrap.min.css">

编辑：我应该说，Web 服务器是否与您的本地文件位于同一台计算机上并不总是很重要。浏览器可能会将其视为不同的实体并阻止访问。

【讨论】：

【解决方案2】：

如果您从本地 C: 或 file:///C:/ 执行或加载它，则会被您的浏览器阻止

您可以使用npm 或修改您的href path

<link rel="stylesheet" type="text/css" href="/django_forms/myapp/templates/formstyles.css">

【讨论】：