Fetch request leads to console error: ...has been blocked by CORS policy:

I use fetch to see if a file exists. When it doesn’t the console throws the following error:

Access to fetch at ‘https://infinityfree.net/errors/404/’ (redirected from ‘(whatever file it checks for’s URL’) from origin ‘(my site)’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

This is fine, the code works and does not stop at the error; I expect sometimes for the file it’s seeking not to be found. But is there any way to get this to stop clogging up my console with errors each time the fetch request is executed?

Set your own error pages to one on your domain and make sure that it has the correct CORS policy or use no-cors in fetch.

3 Likes

I should note that using ‘no-cors’ is a terrible idea in most circumstances.

However, in this case it might be ok.

Just note that the Response will not have a lot of data for you to read.

The former suggestion mentioned by wackyblackie is much better.

As Infinityfree.net has their own error pages with a different domain than your website, it will always throw a CORS policy error. It would be much easier to set up your own error page (make sure to throw a 404 error so that fetches can tell that that page is a 404 error and not just any page). Since CORS is disabled for same-domain requests, you will be able to fetch it without any errors (except maybe a 404 error that fetch normally throws which can be avoided using proper error handling) or additional server configurations. You can only access your own website via same-domain requests (for non-browser requests) anyways, so no need to fiddle with CORS policy in your .htaccess.

3 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.