getx icon indicating copy to clipboard operation
getx copied to clipboard

GetConnect PATCH method

Open Artel-Studio opened this issue 1 year ago • 5 comments

Describe the bug Flutter web. Trying to make PATCH request thru Google Chrome, but getting error: "Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: Method patch is not allowed by Access-Control-Allow-Methods in preflight response."

CORS is well configured for using PATCH method (Access-Control-Allow-Methods: *).

Flutter Version: Flutter 3.7.7 • channel stable • https://github.com/flutter/flutter.git Framework • revision 2ad6cd72c0 (3 недели назад) • 2023-03-08 09:41:59 -0800 Engine • revision 1837b5be5f Tools • Dart 2.19.4 • DevTools 2.20.1

Getx Version: GetX 4.6.5

Solution The only way to solve the problem was to write the word 'patch' in upper case ('PATCH') in get_connect/http/src/http.dart (line 332).

As a temporary measure (until a package update comes out), I rewrote the method in my child class like this:

class MyChildClass extends GetConnect { @override Future<Response<T>> patch<T>(String url, dynamic body, { String? contentType, Map<String, String>? headers, Map<String, dynamic>? query, Decoder<T>? decoder, Progress? uploadProgress, }) { return super.request<T>( url, 'PATCH', body: body, headers: headers, contentType: contentType, query: query, decoder: decoder, uploadProgress: uploadProgress, ); } }

Artel-Studio avatar Mar 28 '23 05:03 Artel-Studio

You need enable cors in your server.

This is not a package error, nor an error in your application, this is an error on your server that does not have cors enabled. For mobile applications, cors does not matter, however for browsers, if cors is not enabled, the browser prevents the content from being rendered (it is a specific policy for browsers).

After enabling cors for all methods (or at least for the patch), it should work.

jonataslaw avatar Mar 29 '23 01:03 jonataslaw

@jonataslaw I'm having the exact same issue. The funny fact is that the problem only occurs with the patch method (get, post, put, delete all work fine) in a browser environment (aka flutter web). I don't get why

TheFe91 avatar Nov 23 '23 14:11 TheFe91

Same issue here. Seems like the package is using patch instead of PATCH, which is why @Artel-Studio 's fix to PATCH works.

https://fetch.spec.whatwg.org/#methods https://stackoverflow.com/questions/73985866/the-mystery-of-patch-request-and-cors-headers

image Here we can see that the request is a patch request, resulting in a CORS error as the server returns PATCH as one of the allowed methods

The strange thing is, this seems to not be an issue in Safari, probably due to how the different browsers implement CORS checking.

leonardtan13 avatar May 01 '24 04:05 leonardtan13

Same issue here. Seems like the package is using patch instead of PATCH, which is why @Artel-Studio 's fix to PATCH works.

https://fetch.spec.whatwg.org/#methods https://stackoverflow.com/questions/73985866/the-mystery-of-patch-request-and-cors-headers

image Here we can see that the request is a patch request, resulting in a CORS error as the server returns PATCH as one of the allowed methods

The strange thing is, this seems to not be an issue in Safari, probably due to how the different browsers implement CORS checking.

You have to allow, cross origin in your server. It is not getx problem

inyong1 avatar May 01 '24 10:05 inyong1

Same issue here. Seems like the package is using patch instead of PATCH, which is why @Artel-Studio 's fix to PATCH works. https://fetch.spec.whatwg.org/#methods https://stackoverflow.com/questions/73985866/the-mystery-of-patch-request-and-cors-headers image Here we can see that the request is a patch request, resulting in a CORS error as the server returns PATCH as one of the allowed methods The strange thing is, this seems to not be an issue in Safari, probably due to how the different browsers implement CORS checking.

You have to allow, cross origin in your server. It is not getx problem

No, this is getx's issue, the patch method needs to be all caps. I'm sure since my pure JavaScript code is working perfect with the same API and the same method, payload and headers.

https://github.com/JakeChampion/fetch/issues/254#issuecomment-169838138

Pic1

My code is also experienced the patch CORS issue, and I'm sure that I enabled CORS for every method (see the OPTION request result)

After I change the code from GetConnect.patch to GetConnect.request('PATCH', ...) it fixed.

image

Result: (the flutter we choose the chrome as dev browser, but the firefox part is also fixed)

Pic3

No more CORS issue.

LittleSheep2Code avatar Sep 16 '24 10:09 LittleSheep2Code