3

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.

gdxgrace
  • 33
  • 4
  • You 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. – Huthaifa Muayyad Aug 01 '21 at 10:23

1 Answers1

2

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

Sarvesh Dalvi
  • 2,260
  • 2
  • 14
  • 30
  • YESS that worked thank you so much! I am not very familiar with Django and this problem stumped me for at least an hour. – gdxgrace Aug 01 '21 at 13:47
  • Glad to hear that. Accept the answer if it solved your problem so that it will help others who come across the same question – Sarvesh Dalvi Aug 01 '21 at 20:48