How to add response header in DIO package

Question

I have been experiencing the CORS XMLHttpRequest error

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/autocomplete/json?params' from origin 'http://localhost:49234' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

And this is my code

///get information of a place after getting its place ID from places autocomplete


Future<Place?> getPlaceDetails(String placeID, String sessionToken,
      [Locale? locale]) async {
    try {
      var dio = Dio();
      dio.options.headers = AppValues.headers;
      dio.options.responseType = ResponseType.plain;
      var response = await dio.get(detailsUrl(placeID, sessionToken, locale));
      var json = convert.jsonDecode(response.data.toString());
      var jsonResult = json[_f.result] as Map<String, dynamic>;
      return Place.fromMap(jsonResult);
    } catch (e) {
      return null;
    }

}

I read an answer to this problem that said the 'Access-Control-Allow-Origin' had to be added in the response headers no the request headers, which is what I believe I am doing. I've had this bug for days and need a permanent solution. I have read answers with temporary solutions such as installing a plugin or disabling web security. But need a solution that will work when I deploy. Whether it is adding response headers (and how), or any other one. Please help, and sincerely thank you for taking the time any help is deeply appreciated.

This is the error log in the console

errors.dart:202 Uncaught (in promise) Error: DioError [DioErrorType.response]: XMLHttpRequest error.
Source stack:
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 926:28                get current
packages/dio/src/dio_mixin.dart 473:35                                                                                         fetch
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5                _async
packages/dio/src/dio_mixin.dart 472:31                                                                                         fetch
packages/dio/src/dio_mixin.dart 468:12                                                                                         request
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5                _async
packages/dio/src/dio_mixin.dart 438:33                                                                                         request
packages/dio/src/dio_mixin.dart 55:12                                                                                          get
packages/app/services/places_service.dart 35:29                                                                                getAutoComplete
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5                _async
packages/app/services/places_service.dart 27:45                                                                                getAutoComplete
packages/app/blocs/map_bloc.dart 39:57                                                                                         searchPlaces
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5                _async
packages/app/blocs/map_bloc.dart 38:31                                                                                         searchPlaces
packages/app/custom/search_map.dart 132:36                                                                                     onChanged
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5                _async
packages/app/custom/search_map.dart 130:14                                                                                     onChanged
packages/flutter/src/material/text_form_field.dart 198:25                                                                      onChangedHandler
packages/flutter/src/widgets/editable_text.dart 2552:27                                                                        [_formatAndSetValue]
packages/flutter/src/widgets/editable_text.dart 1917:7                                                                         updateEditingValue
packages/flutter/src/services/text_input.dart 1596:9                                                                           _handleTextInputInvocation
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5                _async
packages/flutter/src/services/text_input.dart 1538:45                                                                          [_handleTextInputInvocation]
packages/flutter/src/services/platform_channel.dart 414:55                                                                     _handleAsMethodCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5                _async
packages/flutter/src/services/platform_channel.dart 411:40                                                                     [_handleAsMethodCall]
packages/flutter/src/services/platform_channel.dart 407:34                                                                     <fn>
packages/flutter/src/services/binding.dart 377:35                                                                              <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5                _async
packages/flutter/src/services/binding.dart 374:98                                                                              <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/platform_dispatcher.dart 1042:13               invoke2
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/ui/channel_buffers.dart 25:12                                 invoke
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/ui/channel_buffers.dart 65:7                                  push
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/ui/channel_buffers.dart 130:16                                push
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/platform_dispatcher.dart 304:25                invokeOnPlatformMessage
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/text_editing/text_editing.dart 1711:39         updateEditingState
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/text_editing/text_editing.dart 1817:17         <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/text_editing/text_editing.dart 1017:7          handleChange
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 334:14  _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 339:39  dcall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/html/dart2js/html_dart2js.dart 37277:58                              <fn>

    at Object.throw_ [as throw] (errors.dart:251)
    at dio_mixin.dart:628
    at _RootZone.runBinary (zone.dart:1690)
    at _FutureListener.catchError.handleError (future_impl.dart:174)
    at handleError (future_impl.dart:778)
    at Function._propagateToListeners (future_impl.dart:799)
    at _Future.new.[_completeError] (future_impl.dart:609)
    at _SyncCompleter.new.[_completeError] (future_impl.dart:60)
    at _SyncCompleter.new.completeError (future_impl.dart:32)
    at onError (future.dart:544)
    at _RootZone.runBinary (zone.dart:1690)
    at _FutureListener.then.handleError (future_impl.dart:174)
    at handleError (future_impl.dart:778)
    at Function._propagateToListeners (future_impl.dart:799)
    at _Future.new.[_completeError] (future_impl.dart:609)
    at async._AsyncCallbackEntry.new.callback (future_impl.dart:665)
    at Object._microtaskLoop (schedule_microtask.dart:40)
    at _startMicrotaskLoop (schedule_microtask.dart:49)
    at async_patch.dart:166

score 0 · Answer 1 · answered Jan 25 '22 at 06:42

0

CORS XMLHttpRequest error is server side error. It has nothing to do with your app. While using the mobile app you will not face any issue like this but in flutter web its very common.What you can do?- Just ask your server side guy or the api developer to make his/her project CORS policy enable. I had the same issue few weeks ago and I aske the server guy then he enable CORS from there but still I was facing the exception then I asked the api developer then he enable it from his django app and there is no exception from flutter web

answered Jan 25 '22 at 06:42

Saddan

1,546
16
19

I am a one person team :) , I am using the Google Places and IDistance Matrix API, but what do you mean making the CORS policy enable? – Andrea herrera Jan 26 '22 at 00:03
Then its really tough determine the solution. But one thing I can share with you. Use this package to disable cors error in locally but in production no idea https://pub.dev/packages/flutter_cors – Saddan Jan 26 '22 at 04:24
1

Thank you, I will try to fix the issue by calling the api from a cloud function, since the same-origin policy is supposed to only apply on the client to server requests not server to server request so perhaps it will work. – Andrea herrera Jan 26 '22 at 13:46

score 0 · Answer 2 · answered Feb 04 '22 at 07:05

The error is caused because I was using Maps Api which is not designed to be called from client-side code but server side. So the solution is to make a cloud function which makes the request and returns the data

import axios from "axios";

export const serverRequest = functions.https.onCall(async (url, context)=> {
  isAuthenticatedAdmin(context);
  const response = await axios.get(url as string).then(({data})=> data);
  return response;
});

How to add response header in DIO package

2 Answers2