While working on your website, you may be redirected to the InfinityFree 404 error page. This article explains why this typically happens and what you can do to fix this.
Why do I get a 404 error
When you try to access a file on a website, the server tries to find the matching file to load. By default, it works like this.
Suppose you have a website http://example.com which is linked to the folder htdocs in your hosting account. If you then try to load a certain URL, like http://example.com/blog/images/gallery/photo.jpg, the server will map this path to the website folder. So the server will try to load htdocs/blog/images/gallery/photo.jpg.
If one of the folders in this path don’t exist, or don’t have a file with that name, the server will respond with a 404 Page Not Found error.
Note that the way files are loaded, as well as what happens when a file is not found, can be manipulated with .htaccess rules. The RewriteRule directives can be used to completely customize how files are loaded.
What can I do to fix this
There are a couple of common reasons why you may see a 404 error. Here are some things to look at while investigating 404 errors.
Check the home directory of your domain
In the Domains page of your account in the client area, you can find the domains of your account and the folders on your account they are linked to.
Please make sure that the domain folder listed there actually exists on your account (every URL will redirect to a 404 page if the domain’s website folder is missing), and that you uploaded your website files to that directory.
Check the referenced file is actually there
The section above describes how the server normally finds files on your account.
Make sure you’ve uploaded all files and folders successfully
If you’re uploading a website built elsewhere (either on your own computer or on a different hosting service), please make sure you’ve uploaded all files and folders to your account.
The most reliable way to upload an entire website is by using an FTP client like FileZilla. See the article How to upload files with FTP for more information.
Web hosting servers are case sensitive
The InfinityFree servers (like almost all hosting servers) run on a Linux operating system. And on Linux, the names of files and folders are case sensitive. This is different from Windows and MacOS, where files and folders are case insensitive.
This means that if you’re developing your website on Windows, you can refer to a file like http://example.com/background.jpg, and have a file called BackGround.JPG, and the URL will work. But when uploading this to a hosting server, this URL will suddenly return a 404 error.
Please be aware of this while developing on Windows or MacOS. It really helps if you are consistent with capitalization (e.g. never use any capital letters in file or folder names).
The htdocs folder is NOT visible in the URL
The base of your website is linked to a htdocs folder. This means that, by default, a file name on your account matches the path coming after the htdocs part.
So if you have a file with the path htdocs/about.html, the URL will be http://example.com/about.html and the file at htdocs/images/logo.png will have the URL http://example.com/images/logo.png.
In other words, the htdocs part should NOT be included in website URLs. Unless, of course, you create an additional folder with the name htdocs within your website’s htdocs folder (so htdocs/htdocs/photo.jpg).
Be aware of how URLs are evaluated
There are different ways to use URLs on a website.
A few ways to specify URLs are:
- http://example.com/images/logo.png
- //example.com/images/logo.png
- /images/logo.png
- images/logo.png
These can all be used successfully to refer to a particular file, but they all work slightly different. You should be aware of which method you are using and what the consequences are. This StackOverflow answer describes the differences very well.
Check any .htaccess rules for interference
The tips above all assume that you aren’t using any .htaccess rules to manipulate how files are loaded. However, .htaccess rules can be used to completely overhaul how URLs are mapped to files.
While .htaccess are a useful and powerful tool, it’s also possible to write bad .htaccess rules which cause URLs to generate 404 errors. So after considering the points above, you may want to check for and temporarily disable your .htaccess rewrite rules to see if they are responsible for sending your visitors to the 404 error page.
Why do I get a CORS error on the 404 error page
In your notice any missing assets on your page or failing background requests, you may see errors like this in the browser console:
Access to XMLHttpRequest at 'https://infinityfree.net/errors/404/' (redirected from '') from origin '' 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.
The error message implies you need to add an Access-Control-Allow-Origin header to fix it. This is not the solution. As you can see, the page being loaded is our 404 page. And it’s true that our 404 page cannot be embedded in the websites of others.
Instead, the root cause is that one of the URLs being referenced in your website returns a 404 Page Not Found error. To fix this error, you need to find the URL that is causing the 404 error and fix it.