1

I have been struggle to fix the cors problem in my PWA project of flutter and I am following this

how to solve flutter CERTIFICATE_VERIFY_FAILED error while performing a POST request?.

I am using universal_io package since dart.io can not be used for web...here is the part of the code

HttpClient client = new HttpClient();
      client.badCertificateCallback =
          ((X509Certificate cert, String host, int port) => true);
      String url = 'https:xxxx.php';
      Map map = {
        "a": "a",
        "b": "b"
      };
      HttpClientRequest request = await client.postUrl(Uri.parse(url));
      request.headers.set('content-type', 'application/json');
      request.add(utf8.encode(json.encode(map)));
      if (request is BrowserHttpClientRequest) {
        request.credentialsMode = BrowserHttpClientCredentialsMode.include;
      }
      HttpClientResponse response = await request.close();
      print(response.toString());
      String reply = await response.transform(utf8.decoder).join();
      print(reply);

but I get the error that say like this

--------------------------------------------------------------------------------
BrowserHttpClient received an error from XMLHttpRequest (which doesn't tell
reason for the error).
HTTP method:        POST
URL:                https://www.rscm.co.id/apirscm/v2.php
Origin:             http://localhost:64121
Cross-origin request!
XmlHttpRequest 'credentials mode' is enabled.
Did the server send the following mandatory headers?
  * Access-Control-Allow-Credentials: true
  * Access-Control-Allow-Origin: http://localhost:64121
    * In credentials mode, '*' would fail!
  * Access-Control-Allow-Methods: POST

is there a way to solve this problem?

Chetan Joshi
  • 5,582
  • 4
  • 30
  • 43
wahyu
  • 1,679
  • 5
  • 35
  • 73
  • i think the Dio package solved this problem on web..But still not sure – Raine Dale Holgado Sep 11 '20 at 08:13
  • Hi, yhank you for your suggestion I will try to use Dio package too – wahyu Sep 12 '20 at 02:26
  • You can refer to [this](https://stackoverflow.com/questions/72430093/flutter-web-accessing-url-image-cors-policy/72430315#72430315:~:text=You%20can%20mock%20the%20calls%20from%20any%20other%20endpoint%20which%20allows%20all%20cross%20origins%20like%20I%20have%20used%20the%20following%2C) article. – Prudhvik Chirunomula Aug 21 '23 at 09:11

2 Answers2

2

You can you local host server in the debug mode of chrome, here is how: open this in terminal.

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/Users/i0868/Desktop/Chrome" --disable-web-security
hiashutoshsingh
  • 980
  • 2
  • 14
  • 41
  • Hi, thank you for your answer, I will try it and I would like to know....is it only for debug mode and after I deploy my web project... am I still geting cors issue? – wahyu Sep 12 '20 at 02:35
  • 1
    yes there is a chance it will happen....you have to configure you backend to Allow-Control-Allow-Origin...we did the same thing in our team..there i nothing can't be done from flutter side – hiashutoshsingh Sep 12 '20 at 06:16
  • Okey, let me try your answer first...thank you very much for your help – wahyu Sep 12 '20 at 10:05
  • `open` is not recognized as an internal or external command, operable program or batch file. – BartusZak Jan 04 '21 at 09:06
1

you can do something like thisto enable credentials mode:

final httpClientRequest = MyHttpClientRequest;
if (httpClientRequest is BrowserHttpClientRequest) {
  httpClientRequest.credentialsMode = BrowserHttpClientCredentialsMode.include;
}

But prefer using this librairy universal_io instead of dart.io

Boris Kamtou
  • 454
  • 4
  • 5
  • Thank you for the answer, I end up with configure the backend to Allow-Control-Allow-Origin and it works well – wahyu Mar 29 '21 at 01:32