Blocked by CORS policy

#1

Hello all,

I’m just starting out in Web design and I’m learning JS/HTML.

I’ve uploaded some files on the server to try out. Domain name is maxtesti.com/.

These are the files:

http://www.maxtesti.com/mightygumball.js
http://www.maxtesti.com/sales.json
http://www.maxtesti.com/driver.html

I was expecting to see the content of the json file displayed on driver.html page, but as you can see it doesn’t. The console displays messages about " blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource."

I’m not sure how to proceed. Is there an easy way to get around this “policy”?

Thanks

#2

On DH, you can set the Access-Control-Allow-Origin header using a .htaccess file. Here’s a short tutorial on the topic:

#3

Thank you so much.

I’ve found a couple of .htaccess files in the logs directory
logs/maxtesti.com/http/
and
logs/maxtesti.com/https/

I’ve downloaded one and opened with notepad. Here it is:

AuthType Basic
AuthUserFile /home/_domain_logs/masaga/maxtesti.com/https.39520572/html/.htpasswd
AuthName "Statistics Area"
require valid-user

Do I have to put that header in these two .htaccess files or do I have to create a new one and put it somewhere else?

Also, if my domain is maxtesti.com what should I put in the header between the quote marks?

Header Set Access-Control-Allow-Origin "https://your.external.resource.tld"

#4

Probably the reason you’re seeing a CORS error is because mightygumball.js tries to load an URL with a different protocol and site. It uses the protocol https instead of http and the no-www site maxtesti.com, rather then www.maxtesti.com. Because of those differences, browsers treats the request as cross-origin. If you use the exact same URL as the page (or better use a site-relative URL like /sales.json), then the request will be same-origin, and I think will be allowed.

Should you end up needing a CORS header, you would set it in a .htaccess file you place at the site’s root. The path would be something like /home/<user>/maxtesti.com/.htaccess.

1 Like
#5

+1

I’ve been caught under similar conditions. Understanding that www. is actually a subdomain was one of many “Wow! How didn’t I catch that?” moments of enlightenment that is obvious in hindsight.

#6

I’m really new at this…

On the browser page, the URL shows as maxtesti.com
but if I click on it then shows www.maxtesti.com
So, I don’t know if the www part is hidden by the browser.
And if I copy/paste it I get http://www.maxtesti.com/
So I’m assuming this is the full domain name ?

I’ve tried changing the link in the mightygumball.js file to these:
http://maxtesti.com/sales.json
https://maxtesti.com/sales.json
http://www.maxtesti.com/sales.json
https://www.maxtesti.com/sales.json

none of them worked.

So I’m going to try to add the .htaccess file somewhere but I don’t know what to write in the file. Is it just this header?
Header Set Access-Control-Allow-Origin "https://your.external.resource.tld"
Do I replace the link in the header with a link to the mightygumball.js file or with maxtesti.com?

Okay, I’ve sent an email to support… hopefully they can add this .htaccess for me.

#7

Seems to be working fine now with the URL http://www.maxtesti.com/driver.html

#8

I still get the CORS error. The page should show the content of the .json file but I still don’t see it. It just shows " Mighty Gumball Sales" text, which is from the html element h1.

I’ve noticed that the .json link that shows in the code of the mightygumball.js file is
var url = "https://maxtesti.com/sales.json"; http://www.maxtesti.com/mightygumball.js
(at least what shows on the browser page).

but what I wrote in the code is: var url = "http://maxtesti.com/sales.json"; (without the ‘s’)

The server or the browser is somehow changing the http to https.

I’ve asked support if they could change my domain protocol to https so that might solve the problem.

#9

You may be running into caching – DH servers are setup for production use, so non-HTML files are set with long TTLs. Try clearing the browsers cache, and double-check you are getting the expect Javascript in the browser’s developer tools.

Again, I strongly recommend using a site-relative absolute path. This will avoid protocol/host matching issues:

var url = "/sales.json";
#10

Thank you so much for your help.

It was indeed caching. :pouting_cat: I’ve cleared it and it works now.

The use of a site-relative path is a great suggestion. It also works.

Thanks! :+1: