How do you remove the "XMLHttpRequest error" in Flutter? (Django backend, Flutter frontend)
It might be caused because CORS is not enabled in your backend. It happens because your server and frontend are present on different IPs (Even if you are doing your work on localhost, the port is still different).
To solve this you you just have to add parameters to enable CORS in your response header. There are packages available for that acts as a middleware so you wont have to add it in every response. Refer the below question :
How can I enable CORS on Django REST Framework
gdxgrace
Updated on December 31, 2022Comments
-
gdxgrace about 1 year
I'm having trouble connecting my Django backend to my Flutter frontend on web.I have not tested on Android or iOS yet.
I want to be able to do an API call and have it return a response that I can convert to a json. However it's been throwing errors no matter what I've tried. I've tried converting it into an https request with no avail.
If anyone needs anything on the Django side please let me know
This is what the error looks like:
Error: XMLHttpRequest error. dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 909:28 get current packages/http/src/browser_client.dart 71:22 <fn>
dart-sdk/lib/async/zone.dart 1613:54 runUnary dart-sdk/lib/async/future_impl.dart 155:18 handleValue dart-sdk/lib/async/future_impl.dart 707:44 handleValueCallback dart-sdk/lib/async/future_impl.dart 736:13 _propagateToListeners dart-sdk/lib/async/future_impl.dart 533:7 [_complete] dart-sdk/lib/async/stream_pipe.dart 61:11 _cancelAndValue dart-sdk/lib/async/stream.dart 1219:7 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
at Object.createErrorWithStack (http://localhost:63593/dart_sdk.js:5362:12) at Object._rethrow (http://localhost:63593/dart_sdk.js:39509:16) at async._AsyncCallbackEntry.new.callback (http://localhost:63593/dart_sdk.js:39503:13) at Object._microtaskLoop (http://localhost:63593/dart_sdk.js:39335:13) at _startMicrotaskLoop (http://localhost:63593/dart_sdk.js:39341:13) at http://localhost:63593/dart_sdk.js:34848:9
And this is a code snippet
import 'package:http/http.dart' as http; var url2 = 'https://0.0.0.0:8809/test/'; try{ response = await http.get(Uri.parse(url2)); print(response.body); } catch(exception){ print('could not access'); response = await http.get(Uri.parse(url2)); } },
I had it print out the error.
-
Huthaifa Muayyad over 2 yearsYou enable CORS on your django server.Not solved on Flutter's side. Read about CORS related issues, it's not specific to a programming language, it's browser related and server request headers.
-
-
gdxgrace over 2 yearsYESS that worked thank you so much! I am not very familiar with Django and this problem stumped me for at least an hour.
-
Sarvesh Dalvi over 2 yearsGlad to hear that. Accept the answer if it solved your problem so that it will help others who come across the same question