search

Tyrrrz / YoutubeExplode

Abstraction layer over YouTube's internal API
MIT License
2.98k stars 497 forks source link

Blazor Web Assembly Cors Issue - Search Results Blocked #398

Closed Beblia closed 4 years ago

Beblia commented 4 years ago

Im getting a Cors issue with GetVideosAsync. Here is my error.

Access to fetch at 'https://youtube.com/search_ajax?style=json&search_query=coronavirus?&page=0&hl=en' from origin 'https://localhost:44399' has been blocked by CORS policy: 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.

The json is downloadable if you manually put in that link but my Blazor Web Assembly app is being blocked. It works fine in Blazor Server but not blazor web Assembly. Here are some more additional error messages that could help.

at System.Net.Http.WebAssemblyHttpHandler.doFetch (System.Threading.Tasks.TaskCompletionSource1[TResult] tcs, System.Net.Http.HttpRequestMessage request, System.Threading.CancellationToken cancellationToken) <0x31b0ad8 + 0x00a30> in <filename unknown>:0 f.printErr @ blazor.webassembly.js:1 blazor.webassembly.js:1 at System.Net.Http.WebAssemblyHttpHandler.SendAsync (System.Net.Http.HttpRequestMessage request, System.Threading.CancellationToken cancellationToken) <0x318e150 + 0x00174> in <filename unknown>:0 f.printErr @ blazor.webassembly.js:1 blazor.webassembly.js:1 at System.Net.Http.HttpClient.FinishSendAsyncUnbuffered (System.Threading.Tasks.Task1[TResult] sendTask, System.Net.Http.HttpRequestMessage request, System.Threading.CancellationTokenSource cts, System.Boolean disposeCts) <0x31a44f8 + 0x00134> in :0 f.printErr @ blazor.webassembly.js:1 blazor.webassembly.js:1 at YoutubeExplode.ReverseEngineering.YoutubeHttpClient.SendAsync (System.Net.Http.HttpRequestMessage request, System.Net.Http.HttpCompletionOption completion) <0x3172210 + 0x000c8> in :0 f.printErr @ blazor.webassembly.js:1 blazor.webassembly.js:1 at YoutubeExplode.ReverseEngineering.YoutubeHttpClient.GetAsync (System.String requestUri) <0x3161200 + 0x000ca> in :0 f.printErr @ blazor.webassembly.js:1 blazor.webassembly.js:1 at YoutubeExplode.ReverseEngineering.YoutubeHttpClient.GetStringAsync (System.String requestUri, System.Boolean ensureSuccess) <0x3160148 + 0x000c4> in :0 f.printErr @ blazor.webassembly.js:1 blazor.webassembly.js:1 at YoutubeExplode.ReverseEngineering.Responses.PlaylistResponse+<>c__DisplayClass12_0.b__0 () <0x3159118 + 0x000f4> in :0

Thank you.

Tyrrrz commented 4 years ago

You won't be able to access YouTube directly from browser due to CORS, your best bet is to use a backend for that.

Beblia commented 4 years ago

Im new to this whole Cors Backend... Can you give me an example of how I would do that? Do I use a proxy? How would I implement that with YouTubeExplode GetVideosAsync Function? If you could please advise or even better leave some pseudo code that I could reference. Maybe there is a nuget package I can use for cors? Thanks.

Tyrrrz commented 4 years ago

CORS is separate: https://en.m.wikipedia.org/wiki/Cross-origin_resource_sharing#:~:text=Cross%2Dorigin%20resource%20sharing%20(CORS,scripts%2C%20iframes%2C%20and%20videos.

It's a standard that browsers adhere to, which dictates whether a website can make HTTP requests from the frontend to specific hosts.

As for backend, you would probably want a simple REST API running which would wrap YoutubeExplode. Your frontend would then talk to your backend instead of YouTube directly.