.Net Core API と、BabylonJs を使用して 3D モデルをレンダリングする React アプリケーションがあります。私のサーバー側では、シーンにレンダリングするためにクライアントから要求される 3D モデルを保存しています。そうするために、.Net Core サーバーで許可UseFileServer
しました。UseStaticFiles
CORS ポリシーを必要とするリクエストに適用するポリシーも作成しました。私が実行したポリシーは次のとおりです。
services.AddCors(options =>
{
options.AddPolicy("CorsPolicy", policyBuilder => policyBuilder
.AllowAnyHeader()
.SetIsOriginAllowedToAllowWildcardSubdomains()
.AllowAnyMethod()
.SetIsOriginAllowed((host) => true)
.AllowCredentials());
});
そして、次の方法で静的ファイルを対象とするリクエストに適用しています。
app.UseFileServer(enableDirectoryBrowsing: true);
app.UseStaticFiles(fileOptions);
クライアント側では、リクエストは次の方法で Babylon ライブラリによって行われます。
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;
});
何が起こるかというと、Google Chrome でのみ次のエラーが発生し、Firefox でも Operaでも発生しません。
また、Firefox および Opera への応答には欠落しているヘッダーが含まれていますが、 chrome への応答には含まれていません。
クロム:
ファイアフォックス:
オペラ: