I have a .Net Core API and a React application using BabylonJs to render some 3D models. On my server side I am storing the 3D models that will be requested by the client to render into the scene. In order to do so I have allowed UseFileServer
and UseStaticFiles
on my .Net Core server. I have also created a Policy to apply for requests that require the CORS policy. The policy that I implemented is the following:
services.AddCors(options =>
{
options.AddPolicy("CorsPolicy", policyBuilder => policyBuilder
.AllowAnyHeader()
.SetIsOriginAllowedToAllowWildcardSubdomains()
.AllowAnyMethod()
.SetIsOriginAllowed((host) => true)
.AllowCredentials());
});
And I am applying it to the requests that target the Static files the following way:
app.UseFileServer(enableDirectoryBrowsing: true);
app.UseStaticFiles(fileOptions);
On the client side the request is being done by the Babylon library the following way:
SceneLoader.ImportMeshAsync(
"",
"http://localhost:9001/resources/objects/",
"sphere.glb",
scene
)
.then((result) => {
result.renderingGroupId = 1;
scene.createDefaultCamera(true, true, true);
scene.activeCamera.alpha += Math.PI;
})
.catch((error) => {
return null;
});
What happens is that I am receiving the following error only on google chrome and not on Firefox neither on Opera.
Also the responses to Firefox and Opera contain the missing header while the response to chrome does not.
Chrome:
Firefox:
Opera:
After some research time I found the solution for my problem. What was causing the issue was not CORS. It looks like Google has made a security upgrade to Chrome that has changed the Referrer-Policy to:
wgile both other browsers remain on:
As so, google only support CORS on https->https sites. After creating a self-signed certificate and open a port for https problem was resolved.