Not allowed to load local resource error when trying to add custom CSS stylesheet to HTML document
Question
I am writing a project with Django, Bootstrap, HTML, and CSS. The code I found provided a bootstrap stylesheet. When I run the program on developer server 127.0.0.1:8000 the bootstrap styles are applied. I am trying to add a stylesheet to my HTML file with custom styles. I am receiving this in the Chrome console when I try to run the project:
Not allowed to load local resource: file:///C:/Users/Keith/OneDrive/DjangoProjects/django_forms/myapp/templates/formstyles.css"
form.html is below:
{% 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>
Custom CSS style sheet formstyles.css is as below:
input {
color: #683aa4 !important;
margin-top: 100px !important;
}
the HTML file and CSS file are in the same directory
thank you,
2 answers
solution1
0 2021-07-22 04:15:33
For security reasons, browsers may disable loading files directly from your computer under certain circumstances. Accessing local files via a web server is sometimes one of them. So try placing the stylesheet in your web server directory, so that the URL looks as follows, or something similar:
<link rel="stylesheet" href="127.0.0.1/bootstrap-5.0.2-dist/bootstrap-5.0.2-dist/css/bootstrap.min.css">
Edit: I should say, it doesn't always matter if the web server is on the same computer as your local files. The browser may treat it as different entities and block access anyway.
solution2
0 2021-07-22 04:44:31
this is block by your browser if your doing or loading it from local C: or file:///C:/
what you could do is use npm or modify your href path
<link rel="stylesheet" type="text/css" href="/django_forms/myapp/templates/formstyles.css">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.