Access to XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present

Questions
1

Getting the error: Access to XMLHttpRequest at ‘http://www.frogmandesignz.com/dev11/Watch2.glb’ from origin ‘http://frogmandesignz.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

When trying to run this code off of my godaddy domain.

let loader = new THREE.GLTFLoader();
    loader.load('Watch2.glb', function(gltf){
      watch = gltf.scene.children[0];
      watch.scale.set(0.5,0.5,0.5);
      scene.add(gltf.scene);
      animate();
    });

Works fine locally running it from Visual Studio Code’s live server. Have read/bookmarked myself into confusion, can someone tell me what is needed?

From what I’ve found, feel it is either running node.js at the server (not as likely as), 'Acess-Control-Allow-Orgin: [SCHEME: //[HOST]:[PORT_OPTIONAL]

Not sure where this Access Control tag goes or exactly how to populate, or if it is something entirely different…?

Thanks for your help.

2

It’s not a tag but part of the HTTP response header. Hence, this issue needs to be fixed on your web server. When using the npm package http-server, you can enable CORS with a simple CLI option.

--cors Enable CORS via the Access-Control-Allow-Origin header
3

Thanks for the response @Mugen87

Just checked with godaddy I have a Windows server. So does that mean node.js needs to be installed on it?

Found this page with instructions on how to do it: https://ferugi.com/blog/nodejs-on-godaddy-shared-cpanel/

Showing the rep this page they said I would need to switch to CPanel.

Would that work or is there a better option?

4

No, that’s not necessary. You should also be able to configure CORS header for a Windows server (probably IIS).

I bet you will find existing resource on the web that explain how to do so.

5

Thank you much Michael. For any one that might need this, this is the working web.config file:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 	<system.webServer>
   		<httpProtocol>
     			<customHeaders>
       				<add name="Access-Control-Allow-Origin" value="*" />
     			</customHeaders>
   		</httpProtocol>
	<staticContent>	
		<mimeMap fileExtension=".glb" mimeType="model/vnd.gltf.binary"/>
	</staticContent>
 </system.webServer>
</configuration>
2 Likes
6

Do you know how to do it in Blazor applications?

7

Just saw this now Maalik, sorry for delay.

Unfortunately I do not.