In my modelviewer hosted here, I am using the url param ?file= to send a url to a glb model to the needle loadsync function to load a model, I get this error when I use external model urls though:
Access to fetch at 'https://login.microsoftonline.com/f7f41e28-cfd0-4730-82d5-c0df609f4dac/oauth2/authorize?0' (redirected from 'https://electropagesmedia.sharepoint.com/sites/EPM-Documents/Shared%20Documents/Clients/clientname/Projects/2024_Electronica_3D_Content/Production/Touchscreen%20App/3D%20models/GLB/glb_G125-FS15005F3P_v1_2k/G125-FS15005F3P_v1_2k.glb') from origin 'https://demo.epm.digital' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://demo.epm.digital' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
How do I fix this issue with CORS on the loadsync function? Please note the url in the above error is amended to exclude a client name so it won’t point to a file if you try it
The CORS (Cross-Origin Resource Sharing) issue you’re encountering indicates that the external resource you’re trying to load does not permit requests from your origin due to its security settings.
To resolve this, you can consider the following approaches:
CORS Configuration on the Server: Ensure that the server hosting your GLB model allows requests from your domain (https://demo.epm.digital). This requires adding the Access-Control-Allow-Origin header in the server response to explicitly allow your origin. If you have control over the hosting server, configure it to send the necessary headers.
Proxy Server: If you cannot modify the server settings, consider setting up a proxy server that retrieves the data from the original source and then responds to your application without CORS restrictions. This proxy would need to add the appropriate CORS headers to its responses.
Use a Different Hosting Service: If your current server cannot be configured to allow CORS, consider hosting your GLB models on services that are CORS-compliant, such as GitHub Pages, AWS S3, or similar platforms that permit CORS configuration.
Modifying the LoadSync Function Call: If the external source is CORS-enabled and only restricts your particular use case, check if you can pass additional parameters or configure the load request in a way that meets the server’s requirements. However, typically, modifying this won’t change CORS behavior if the server settings are restrictive.
Using a CORS Proxy for Development: For local testing, you can use a CORS proxy like cors-anywhere but be cautious using it in production environments as it’s not secure.
Here’s an example of a header you’d want from the server:
If you can modify the server, ensure this header is present in the response. If you have any further details about how the model is hosted or specific settings, please share.
For more information on handling CORS, you might check the MDN documentation on it: MDN CORS.
Let me know if you need further assistance!
3 replies left thread_rqPUQYGQb4re0qYAFSnzgTxV Reply to this message to continue the conversation
CORS is a browser mechanism that prevents unauthorized access to resources from external websites. Basically, servers send along headers that allow or prevent a client from loading files depending on where those clients are. Note that this is independent from Needle (it’s a basic mechanism of how the web functions).
In the example you shared here, it is what it is – Sharepoint is configured to NOT allow any external access by webpages to the resources it’s hosting. So, you can download those resources manually, but the server says that it is not allowed to request the resources from the epm.digital origin.
To fix this issue and allow loading the files, either the files need to be hosted somewhere else where CORS is allowed, or the Sharepoint instance needs to be configured to allow the demo.epm.digital origin (and/or other origins) to request files. Typically, there is a server-side configuration that can be made to allow specific origins (recommended) or wildcard origins (usually not recommended).