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/