How to address the CORS policy using BlazorBindGen?

Question

How to address the CORS policy using BlazorBindGen?

Closed this issue 3 years ago · 9 comments

GeorgeS2019 commented 3 years ago

Question 1: how to address the CORS policy?

Access to script at 'https://meet.jit.si/external_api.js' from origin 'https://localhost:44376' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Unhandled exception rendering component: TypeError: Failed to fetch dynamically imported module: https://meet.jit.si/external_api.js
System.Exception: TypeError: Failed to fetch dynamically imported module: https://meet.jit.si/external_api.js
at BlazorBindGen.LockHandler.HoldVoid(Int64 errH) in BlazorBindGen\Bindings\LockHandler.cs:line 17
at BlazorBindGen.BindGen.Import(String moduleURL) in BlazorBindGen\Bindings\BindGen.cs:line 65
at SampleApp.Pages.JitsiMeet.Draw() in BlazorBindGen\SampleApp\Pages\JitsiMeet.razor:line 36
at SampleApp.Pages.JitsiMeet.OnInitializedAsync() in BlazorBindGen\SampleApp\Pages\JitsiMeet.razor:line 23
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Question 2: Is there a way to handle TWO imports?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://meet.jit.si/external_api.js"></script>

 await Import("https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js");
 await Import("https://meet.jit.si/external_api.js");

Question 3: How would you make Jitsi-meet works?

Consider the fact you have demonstrated VideoCamPage.razor

Reference

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://meet.jit.si/external_api.js"></script>
<script>
$(document).ready(function(){
        var domain = "meet.jit.si";
	var options = {
		roomName: "JitsiMeetAPIExample",
		width: 700,
		height: 700,
		parentNode: document.querySelector('#meet')
	}
        var api = new JitsiMeetExternalAPI(domain, options);
});
</script>

<title>Hello Node</title>
</head>
<body>
<h1>Page served from Node http-server</h1>
<div id="meet">
	meeting
</div>
<p></p>
</body>
</html>

@page "/jitsimeet1"

@using BlazorApp
@using BlazorBindGen
@using static BlazorBindGen.BindGen
@inject IJSRuntime runtime

<h1 style="color:white;">Page served from Node http-server</h1>
<div id="container">
    <div id="meet" @ref="canvas">meeting</div>
</div>

@code
{
    ElementReference canvas;

    JWindow win;
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        await Init(runtime);
        win = Window;
        await Draw();
    }

    //var domain = "meet.jit.si";
    //var options = {
    //	roomName: "JitsiMeetAPIExample",
    //	width: 700,
    //	height: 700,
    //	parentNode: document.querySelector('#meet')
    //	}
    //var api = new JitsiMeetExternalAPI(domain, options);
    async Task Draw()
    {
        await Import("https://meet.jit.si/external_api.js");
        //converting param from JS object to C# Class (Convert first to JS->JSON->C# class using automatic generators)
        var param = new JitsiInput
        {
            domain ="meet.jit.si",
            options = new JitsiOptions
            {
                   roomName = "JitsiMeetAPIExample",
		   width = 700,
		   height = 700,
		   parentNode = canvas
            }
        };
        JObjPtr _jitsi = Window.CallRef("JitsiMeetExternalAPI", param); /* js reference to jitsit */
    }

    public class JitsiOptions
    {
        public ElementReference parentNode { get; set; }
        public string roomName { get; set; }
        public int width { get; set; }
        public int height { get; set; }
    }

    public class JitsiInput
    {
        public string domain { get; set; }
        public JitsiOptions options { get; set; }
    }
}
<style>
    #container {
        margin: 0px auto;
        width: 500px;
        height: 375px;
        border: 10px #333 solid;
    }

</style>

Answer 1 · 2021-10-22T11:58:02.000Z

1. Handling CORS

CORS should be handled server side.
In BlazorBindGen Import internally calls JS 'import` statement , translated call is like

var promise = import("module-name");

so all CORS rules on js side will be applicable in C# Side for await Import(liburl) call

2. Multiple Imports

yes it works, i tested these 2 URLs

        await Import("https://unpkg.com/ml5@latest/dist/ml5.min.js");
        await Import("https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js");

3. Making Constructor Calls

let v=new JitsiMeetExternalAPI(param); //this is js constructor with new Keyword

for this you have to use

var _jitsi=Window.Construct("JitsiMeetExternalAPI",params);

vs

let v=JitsiMeetExternalAPI(param); //this is js function call

if this was the syntax then use function call as you have used in above example

JObjPtr _jitsi = Window.CallRef("JitsiMeetExternalAPI", param);

Answer 2 · 2021-10-22T12:41:15.000Z

Created ServerApp: BlazorServerApp

CORS should be handled server side.
Not sure yet if the CORS error is resolved due to await Init(runtime); error. See below

Error happens at `await Init(runtime);` Any suggestion?

@page "/jitsimeet1"
@using BlazorBindGen
@using static BlazorBindGen.BindGen
@inject IJSRuntime runtime


    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        await Init(runtime);
        win = Window;
        await Draw();
    }

Error: System.ArgumentNullException: Value cannot be null. (Parameter 'jsRuntime')
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeAsync[TValue](IJSRuntime jsRuntime, String identifier, Object[] args)
   at BlazorBindGen.BindGen.<>c.<Init>b__14_0() in BlazorBindGen\Bindings\BindGen.cs:line 19
   at System.Lazy`1.ViaFactory(LazyThreadSafetyMode mode)
   at System.Lazy`1.ExecutionAndPublication(LazyHelper executionAndPublication, Boolean useDefaultConstructor)
   at System.Lazy`1.CreateValue()
   at BlazorBindGen.BindGen.Init(IJSRuntime jsRuntime) in BlazorBindGen\Bindings\BindGen.cs:line 21
   at BlazorServerApp.Pages.JitsiMeet.OnInitializedAsync() in BlazorServerApp\Pages\JitsiMeet.razor:line 24
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

Answer 3 · 2021-10-22T13:10:27.000Z

Created ServerApp: BlazorServerApp

CORS should be handled server side.
Not sure yet if the CORS error is resolved due to await Init(runtime); error. See below

What i meant here was the library author should add CORS policy for cdn links

Access to script at 'https://meet.jit.si/external_api.js' from origin 'https://localhost:44376' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

JS Import is failing

for script URL try adding script tag in head of index.html page, see if that works

<script src="https://example.com/example-framework.js" crossorigin="anonymous"></script>

Answer 4 · 2021-10-22T13:50:34.000Z

Feedback1: SampleApp (Blazor WebAssembly App)

for script URL try adding script tag in head of index.html page, see if that works

using jitsi.html in the wwwroot directory
I have no problem getting jitsi-meet to work when directing to 'https://localhost:44376/jitsi.html'

Not sure if this address your feedback?

jitsi.html

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://meet.jit.si/external_api.js"></script>
    <script>
        $(document).ready(function () {
            var domain = "meet.jit.si";
            var options = {
                roomName: "JitsiMeetAPIExample",
                width: 700,
                height: 700,
                parentNode: document.querySelector('#meet')
            }
            var api = new JitsiMeetExternalAPI(domain, options);
        });
    </script>

    <title>Hello Node</title>
</head>
<body>
    <h1>Page served from Node http-server</h1>
    <div id="meet">
        meeting
    </div>
    <p></p>
</body>
</html>

Feedback 2

BlazorServerApp fails while BlazorWebAssembly App works

BindGen.cs line 21

_moduleTask.Value is null exception in BlazorServerApp

Due to this error in BlazorServerApp, I was not able to test your suggestion on CORS in ServerApp, as the error prevent the method of loading

==> Why in ServerApp not WebAssemblyApp that this line fails?

Answer 5 · 2021-10-22T14:30:35.000Z

for 1st one
in index.html

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://meet.jit.si/external_api.js"></script>

in razor page

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        await Init(runtime);
        win = Window;
        await Draw();
    }
    async Task Draw()
    {
        var param = new JitsiInput
        {
            domain ="meet.jit.si",
            options = new JitsiOptions
            {
                   roomName = "JitsiMeetAPIExample",
		   width = 700,
		   height = 700,
		   parentNode = canvas
            }
        };
        var api= Window.Construct("JitsiMeetExternalAPI", param); 
    }

for 2nd one:
I haven't really tested the library for Blazor Server , will debug it soon and Will be updating the main repo with blazor server support soon.
Thanks for Feedback.

Answer 6 · 2021-10-30T08:41:04.000Z

Close as stated in the commit

Answer 7 · 2021-11-29T03:57:42.000Z

@sps014 Now that u have implemented Blazor Server App. Can the CORS issue discussed here be addressed.?
I have not the time yet for next two months to re-visit this issue.

Hopefully you are aware of CORS issue facing BlazorBindGen

Answer 8 · 2021-11-29T07:13:27.000Z

@sps014 Now that u have implemented Blazor Server App. Can the CORS issue discussed here be addressed.?
I have not the time yet for next two months to re-visit this issue.

Hopefully you are aware of CORS issue facing BlazorBindGen

As stated earlier Import in BindGen is wrapper around js import.
Also Jitsi doesn't allow the js file to served on serverless mode.
To fix this you can download jitsi.min.js and put it in wwwroot folder and change url await ImportAsync("_content/AppAssemblyName/jitsi.meet.js");.

This issue originate from jitsi
https://community.jitsi.org/t/cannot-get-lib-jitsi-meet-to-work-because-of-cors/19292

Answer 9 · 2022-01-20T13:46:01.000Z

@sps014 Now that this repo has advanced to support blazor server app, I understand you have tight schedule, could your suggestion address CORS and eventually making Jitsi.meet.js to work?

Question 1: how to address the CORS policy?

Question 2: Is there a way to handle TWO imports?

Question 3: How would you make Jitsi-meet works?

Reference

1. Handling CORS

2. Multiple Imports

3. Making Constructor Calls

Created ServerApp: BlazorServerApp

Error happens at await Init(runtime); Any suggestion?

Created ServerApp: BlazorServerApp

Feedback1: SampleApp (Blazor WebAssembly App)

Feedback 2

Error happens at `await Init(runtime);` Any suggestion?