Issue with web : Error: XMLHttpRequest error.

[peter-pr]

Describe the bug
The library cannot send requests in flutter web.

Stacktrace:

Error: XMLHttpRequest error.
    dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 906:28                get current
packages/http/src/browser_client.dart 71:22                                       <fn>
dart-sdk/lib/async/zone.dart 1612:54                                              runUnary
dart-sdk/lib/async/future_impl.dart 152:18                                        handleValue
dart-sdk/lib/async/future_impl.dart 704:44                                        handleValueCallback
dart-sdk/lib/async/future_impl.dart 733:13                                        _propagateToListeners
dart-sdk/lib/async/future_impl.dart 530:7                                         [_complete]
dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
dart-sdk/lib/async/stream.dart 1219:7                                             <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 324:14  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 329:39  dcall
dart-sdk/lib/html/dart2js/html_dart2js.dart 37307:58                              <fn>


    at Object.createErrorWithStack (http://localhost:49710/dart_sdk.js:5348:12)
    at Object._rethrow (http://localhost:49710/dart_sdk.js:39350:16)
    at async._AsyncCallbackEntry.new.callback (http://localhost:49710/dart_sdk.js:39344:13)
    at Object._microtaskLoop (http://localhost:49710/dart_sdk.js:39176:13)
    at _startMicrotaskLoop (http://localhost:49710/dart_sdk.js:39182:13)
    at http://localhost:49710/dart_sdk.js:34689:9

[Hexer10]

If you read in the browser console you should get something the CORS, unfortunately, there is nothing we can do to fix this issues, since requests with a different origin then the webpage one are automatically blocked.

The only way to workaround this issue would be to implement a custom http client that acts as a middleware and redirects instead the requests a server of yours (maybe see https://github.com/Rob--W/cors-anywhere )and then to the youtube api.

This might not be a trivial task to do if you don't know where to look for, and have not prior experiences implementing custom http clients and this kind of stuff.

[peter-pr]

ok thanks for clarification. So this means https://pub.dev/packages/youtube_explode_dart does not support "web". The package compatibility information is misleading.

[Hexer10]

I cannot change that, since the package can be compiled in web, the thing is that then the requests cannot be successfully made to the youtube endpoint

[M123-dev]

@Hexer10, just out of interest, have you tried to use embed youtube URLs?

So instead of https://www.youtube.com/watch?v=cP5fnXQfaao => https://www.youtube.com/embed/cP5fnXQfaao

[Hexer10]

@M123-dev That is already implemented in the library, first the data is fetched from the watchpage, and if that fails from the embed page

[asvgithub01]

Using middleware like https://cors-anywhere.herokuapp.com , that you said, works in flutterweb, but you need to modify the code in search_page, for add it when get 'https://www.youtube.com/results?search..'.

something like that:
static Future get(
YoutubeHttpClient httpClient, String queryString,
{SearchFilter filter = const SearchFilter(''), String proxyCORSUrl=""}) {
var url =
'${proxyCORSUrl}https://www.youtube.com/results?search_query=${Uri.encodeQueryComponent(queryString)}&sp=${filter.value}';
return retry(httpClient, () async {
var raw = await httpClient.getString(url);
return SearchPage.parse(raw, queryString);
});
}

thanks for the package! ^_^

[poka-IT]

But is it not just possible to add header to your get request to allow cross origins ?

header("Access-Control-Allow-Origin: *");

https://fluttercorner.com/flutter-web-getting-xmlhttprequest-error-while-making-http-call/

[at15]

For anyone looking at this issue, you can use the iframe based youtube package on web https://github.com/sarbagyastha/youtube_player_flutter/tree/develop/packages/youtube_player_iframe which does not provide the flexibility of getting the actual stream etc.

Though the iframe based version does not work on macos because it is using webview. macos already have webview (endorsed) https://pub.dev/packages/webview_flutter_wkwebview, some methods such as setting background are missing sarbagyastha/youtube_player_flutter#624 For macos, using the video stream from youtube_explode works with video_player package on macos (NOTE: the highest quality is video only, audio is another stream).

As for CORS, the CORS header is set by youtube to not allow other domains (e.g. yourapp.com to access its resources). Setting HTTP headers for your own applications does not work, it only allows yourotherapp.com to access yourapp.com. In theory you can ask your user to disable CORS https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome In practice I think people don't know how to do it will find alternatives and people knowing how to do that will refuse to do so because they know there is security risk.

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS