Custom device models repository: Cross-Origin Resource Sharing (CORS) support

[chandra-rayaprol]

When I attempted to access the custom model repository from Blazor webassembly (standalone) project, I received this error: Access to fetch at 'https://raysapps.github.io/DeviceModels/dtmi/com/raysapps/mxchipapp/mxchipapp-1.json' from origin 'https://localhost:7001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Could you please help me in resolving this issue?

Best Regards, Chandra Mohan

[rido-min]

Hi @Raysapps

I've been able to use GitHub pages to host a custom repository, and make HTTPS calls from external domains, so I guess CORS is already enabled in GitHub pages by default.

I've also been able to request the URL from Blazor WebAssembly:

@code {

    protected override async Task OnInitializedAsync()
    {
        var dtdl = await Http.GetStringAsync("https://raysapps.github.io/DeviceModels/dtmi/com/raysapps/mxchipapp/mxchipapp-1.json");
        System.Diagnostics.Debug.WriteLine(dtdl);
    }
}

Can you share repro steps?

[chandra-rayaprol]

Hi Rido, I've shared the BlazorWebAssembly Project("https://github.com/Raysapps/ModelReposiotryAccessFailure") to replicate this issue. The problem seems to be in the SDK Azure.IoT.ModelsRepository (1.0.0-preview.5) and the call to ModelsRepositoryClient. GetModelAsync() on custom repository is causing the exception. To reproduce this issue ,click on the 'GetModelFromRaysAppsRepository' button on the webpage. Please check the browser's console for the details error message. Exception line( line 76, Index.razor) Best Regards, Chandra Mohan

[digimaun]

Hey @Raysapps thanks for submitting this issue.

The problem with the SDK in this context is it will by default include additional headers in the request (which are optimized for Azure but not necessarily for general purpose/non-Azure usage). These additional headers expand the GetModel[Async]() request beyond a 'simple request' causing CORS preflight enforcement.

One quick way to resolve is to extend the default http pipeline policy to remove these extraneous headers and avoid CORS preflight.

Here are a couple snippets to show how to do that:

@using Azure.Core
@using Azure.Core.Pipeline
@using Azure.IoT.ModelsRepository

...
...

var customOptions = new ModelsRepositoryClientOptions();
customOptions.AddPolicy(new SamplePolicy(), Azure.Core.HttpPipelinePosition.BeforeTransport);
var client = new ModelsRepositoryClient(new Uri("https://raysapps.github.io/DeviceModels"), options: customOptions);

public class SamplePolicy : HttpPipelinePolicy
{
    public override void Process(HttpMessage message, ReadOnlyMemory<HttpPipelinePolicy> pipeline)
    {
        LimitHeaders(message);
        ProcessNext(message, pipeline);
    }

    public override ValueTask ProcessAsync(HttpMessage message, ReadOnlyMemory<HttpPipelinePolicy> pipeline)
    {
        LimitHeaders(message);
        return ProcessNextAsync(message, pipeline);
    }

    private void LimitHeaders(HttpMessage message)
    {
        message.Request.ClientRequestId = "";
        message.Request.Headers.Remove("x-ms-client-request-id");
        message.Request.Headers.Remove("x-ms-return-client-request-id");
    }
}

[chandra-rayaprol]

Hi @digimaun Thank you for your detailed explanation and suggested code changes. I've implemented the fix into my project and happy to say that this issue has been resolved. Thanks again. Best Regards, Chandra Mohan