Preflight response is not successful with proper headers
Solution 1
The solution was very simple but not very obvious, I simply had to set the proper headers on my API. This article solved the issue for me and was very simple.
# Always set these headers.
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
# Added a rewrite to respond with a 200 SUCCESS on every OPTIONS request.
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
Solution 2
This issue happened due to the WKWebView Mostly
So, the very simple way to use the WKWebView in Ionic is that You Must uninstall the previously installed UIWebView from the plugin by running the following command.
- ionic cordova plugin remove cordova-plugin-ionic-webview
After that try to add the WKWebView Plugin with this command
- ionic cordova plugin add cordova-plugin-wkwebview-engine
When the WkWebView plugin is installed the very next thing is to add the following lines in the config.xml file
feature name="CDVWKWebViewEngine"
param name="ios-package" value="CDVWKWebViewEngine"
feature
preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"
preference name="WKWebViewOnly" value="true"
After doing all that when you try to run the application and hit some api call you will get the preflight issue in that due to CORS so to fix that. Simply run the following command
- ionic cordova plugin add cordova-plugin-wkwebviewxhrfix
After adding the above plugin the CORS issue will be resolved
Thanks, Happy Coding
Solution 3
If you're only having the issue in iOS then it sounds like an issue with WKWebView
https://ionicframework.com/docs/wkwebview/
When the server receives the OPTIONS request, what does it respond with?
I would make sure the response from the OPTIONS request contains the headers WKWEBView is expecting, otherwise it will prevent the code from the making the call.
Joe Scotto
Writer of code, creator of videos, and taker of photos.
Updated on June 05, 2022Comments
-
Joe Scotto almost 2 years
I'm having issue getting my ionic app to POST to my API. On my api I have set the following headers:
header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: Content-Type"); header("Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS");
When posting from Postman or the actual website, everything functions as expected and I see these headers come back but once I open up my app and send a request, it no longer works.
GET Requests are working fine, it's just POST requests that are broken. I use the following to send a post request on my app:
/** * Post to the API * @param path Where to go * @param params What to send */ private post(path, params): Promise<any> { return this.http .post(this.apiUrl + path, params) .toPromise() .then(r => r.json()); }
I get the following error inside of my ionic app
Failed to load resource: Preflight response is not successful XMLHttpRequest cannot load https://mmcalc.com/api/calculate. Preflight response is not successful
I've been pulling my hair out over this for nearly 15 hours now, I don't understand why it won't work.
-
m50 about 4 yearsIonic's FAQ allows to better understand the problem ionicframework.com/docs/faq/cors. I have to specify the access-Control-allow-Origin otherwise is not working with ios. Ex. SetEnvIf Origin "^(.*)$" AccessControlAllowOrigin=$0 Header always set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin