I already read this question, but does not solved my case, even if is very similar.
I am using Slim framework.
This is my project structure. The Slim routing happens into the public folder.
The page templates/index.phtml needs some JS and CSS, but I get 404 not found.
My templates/index.phtml requires:
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My WebSite</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style/global.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="script/index.js"></script>
</head>
And I get (for example for the index.js):
Not Found
The requested URL /index.js was not found on this server.
Apache/2.4.18 (Ubuntu) Server at blah.blah.blah Port 443
I'm not very familiar with the Slim framework but I know you're using a router and a public folder which leads me to believe that it can't access index.js because it's out of scope. Perhaps try moving your script folder inside your public folder and see if that works! :)
Related
I've been following the Font Awesome guides how to use their kits, but when I inserted this code at the end of my body tag, I get an error, and I can't use any icons.
<script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script>
Here is the full HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="imgs/favicon.ico" />
<link rel="apple-touch-icon" href="imgs/logo192.png" />
<link rel="stylesheet" type="text/css" href="scss/main.css">
<title>My title</title>
</head>
<body>
<div>Facebook<i class="fab fa-facebook"></i></div>
<script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script>
</body>
</html>
And here is the error message:
Access to script at 'https://kit.fontawesome.com/a4c00a89bc.js' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://kit.fontawesome.com/a4c00a89bc.js net::ERR_FAILED
Any idea?
It looks like JavaScript Debug server caused the problem, that I was using because of the Live Edit plugin. As I restarted the server, the script worked. Also, if I just opened the html file, it worked properly. But the problem always occur at first start of the JavaScript Debug server, when it opens up the browser.
A quick note: put the script rather between the head tag, because it inserts a stylesheet into the html file.
(I am using JavaScript Debug server in phpStorm)
I had the same problem. It turns out that I added domain restriction of my font awesome kit, which you can configure on the Font Awesome website. I added mydomain.com, while the correct way is to add *.mydomain.com to allow any subdomain in my website to use the font awesome script. The problem went away once I fixed the error.
You can check the domain setting of your kit in your Font Awesome account to see if it is the cause of the CORS blocking problem.
i tested it locally and it's worked but when i upload it to my web host, some of the css code is not fully loaded, only some of the code inside of it are loaded. what happen pls i need help. i already checked the path.
thank you :)
this is from the host
this is from the local file
<html lang="id">
<head>
<title>Weebs Desu! official discord website</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />```
You need to provide more data to give us some clue, but here is a thing.
Maybe because the version of your css is not updated in the hosting yet. You already change your css code but the result still same as before. The solution for this is you can add some v?=1.10 behind style.css.
So the result will be style.css?v=1.10, so the browser wont load the older version of css.
The number ?v=1.01 can be anynumber as long as greater than before (It works like patch).
If it's working locally but not on your web host, your style.css filename casing might not be matching what you have in your <link> tag.
For example <link rel="stylesheet" href="style.css" /> should mean that your filename casing should also be style.css. Not Style.css.
Also hard to debug without a live example provided btw!
I hope you are doing well.
The webpage does not load correctly on the first load, but it works perfectly whenever I refresh the page. Also, on the first load, I get an error(Failed to load resource: the server responded with a status of 404 (Not Found)).
First load:
On refresh:
Main index file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/editor.css">
</head>
<body>
...
<!-- SCRIPTS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/custom.js"></script>
<link rel="stylesheet" href="app.css">
</body>
</html>
Let me know if you have any questions
Sorry, if it's been already asked. I searched everywhere and I cant why that's happening.
Thanks in advance
First of all, you don't have to be sorry for asking out any questions. No one knows it all.
To the main question, it seems you have too many scripts loading when the site is open and it times out before it could completely finish loading.
It only finishes loading after the refresh as some of the files are already loaded.
Import only CSS and js files you need and try moving some of the scripts to the bottom end of the body tag.
Use CDN URL to load the imported scripts faster
The most common reason for that is a slow server, which takes more time to handle the request than the request default timeout. So, when you refresh, many of the assets are loaded from the cache, allowing the assets that failed to load on the first time to load properly.
Some solutions to this problem is:
Use CDN urls rather than loading the assets from your server <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> instead of <link rel="stylesheet" href="css/bootstrap.min.css">
Use Lazy loading for assets that are not used immediately. More about that here.
Sometimes, the server itself is not the bottle neck, not in terms of computation I mean, but the network is! So, make sure your server's network has enough upload speed to serve your app's needs.
I can also see that you are linking a CSS file app.css at the end of the body, and I guess this is what causing the first image you posted, typically it's a good practice to load the CSS files before the body, and the JS files after it, so that the page looks it loaded faster.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="{{ url_for('static',filename='favicon.ico') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='styles.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="lib/tablesorter-master/js/jquery.tablesorter.js" type="text/javascript"></script>
...
My folder structure is..
home
<-lib/tablesorter-master/js/jquery.tablesorter.js
<-templates/index.html
<-static/styles.css
I'm running a flask application and the py script is in the home directory.
I keep getting a "404/NOT FOUND" when the html loads on my browser (Chrome - localhost). I have read through similar threads here and elsewhere, but cannot seem to get this to work (most topic threads were around folder structures).
Any help would be appreciated.
The error message was straight-forward....the browser was expecting the file to be served via the flask server, which is not the normal way of doing this. I've used href in the same way as I'd use it to serve static files, and the browser does not complain now.
CSS is perfectly loading on the offline webpage (localhost) but on the live website, CSS is not loading.
I am using hosting and domain from the biz.nf website.
I used bootstrap 4 on this website.
My index.html head code:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://www.site.c1.biz/css/style.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
I saw your website in the inspect mode
its showing style.css is 403 forbidden in the network tab
Check with it
you can check here ERROR 403 in loading resources like CSS and JS in my index.php
Maybe you try using relative css path or check your webserver configuration, because loading the CSS file returned a 403 forbidden error code.
Finnaly I figured it out,
The problem was caused because my images was not in the same directory as of index.html
I tried many things.
Webpage inspect was throwing some error like - anime.min.js error in front of img name which was completely useless.
Many said it as a broken img but it's a different issue.