Using http package with Flutter Web App to post to Cloud Firestore and its REST API

user_11264396 0
Viewed 1109

I have been searching around to find out how to use http package and its http.post() method to access and create a new document in a Cloud Firestore collection - but it seems all the articles i come across are 2019 and before. I keep getting the following error not matter what I try:

Error: XMLHttpRequest error.
    dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 264:20      get current
packages/http/src/browser_client.dart 84:22                                       <fn>
dart-sdk/lib/async/zone.dart 1450:54                                              runUnary
dart-sdk/lib/async/future_impl.dart 143:18                                        handleValue
dart-sdk/lib/async/future_impl.dart 696:44                                        handleValueCallback
dart-sdk/lib/async/future_impl.dart 725:32                                        _propagateToListeners
dart-sdk/lib/async/future_impl.dart 519:7                                         [_complete]
dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
dart-sdk/lib/async/stream.dart 1300: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 37275:58                              <fn>


    at Object.createErrorWithStack (http://localhost:49938/dart_sdk.js:4342:12)
    at Object._rethrow (http://localhost:49938/dart_sdk.js:37882:16)
    at async._AsyncCallbackEntry.new.callback (http://localhost:49938/dart_sdk.js:37876:13)
    at Object._microtaskLoop (http://localhost:49938/dart_sdk.js:37708:13)
    at _startMicrotaskLoop (http://localhost:49938/dart_sdk.js:37714:13)
    at http://localhost:49938/dart_sdk.js:33226:9
Application finished.

My code in Flutter:

  Future<http.Response> _post() {
   
    String url =
        'https://firestore.googleapis.com/v1/projects/onebear-webapp/databases/(default)/collections/txt?key=AIzxSyAllNuEbN40DEvBPIQkcLIWn00c9TYWqY';
    return http.post(
      url,
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(<String, String>{
        'title': 'title',
      }),
    );
  }

I have read about CORS and attempted a solution from codewithandrea.com (https://codewithandrea.com/videos/2020-05-25-top-8-tips-for-flutter-web-firebase/)- still no luck

Appreciate any advice and guidance to get this to work.

google-cloud-firestore firebase flutter http web-applications
1 Answers

put this in the header parameter.


headers: {
  "Access-Control-Allow-Origin": "*", // Required for CORS support to work
  "Access-Control-Allow-Credentials": true, // Required for cookies, authorization headers with HTTPS
  "Access-Control-Allow-Headers": "Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
  "Access-Control-Allow-Methods": "POST, OPTIONS"
},
body: JSON.stringify(item);
user_120474920
Related