Preflight error when using Authorization header on iOS 15.5/Xcode

I'm having problems with my cordova Project on iOS 15.5 Right now I'm trying to verify an user login on IIS with standardauthentification enabled. Here the code from the webserver.

<?php

// Prüfen, ob Benutzeranmeldung über IIS erfolgt ist
if (!isset($_SERVER['PHP_AUTH_USER'])) {
    header("HTTP/1.1 401 Unauthorized");
    exit;
}

// OK zurückgeben
header("Content-Type: application/json");
echo '{"login":"ok"}';
?>

And here the javascript request from the iPhone:

function benutzeranmeldungPruefen() {


    var loginString = eingabeBenutzername   ":"   eingabeKennwort;
    var loginStringBase64 = "Basic "   btoa(loginString); // String für Header in Base64 codieren

    
    // Login-Header definieren
    $.ajaxSetup({
        headers: { "Authorization": loginStringBase64 },
            timeout: 10000
    });
    
    var servername = localStorage.getItem("Server");
    var port = localStorage.getItem("Port");
    var https = localStorage.getItem("Https");
 
    // HTTP-GET-Request erstellen
    var get = $.get( https "://" servername ":" port "/logincheck.php");

    get.done(function( data ) {
        
        // Prüfen, ob Anmeldung erfolgreich war
        if (data["login"] == "ok") {
            
            localStorage.setItem("Benutzer", eingabeBenutzername);
            localStorage.setItem("Kennwort", eingabeKennwort);
            
        }
        else {
            // Grafische Anpassungen und Protokoll
            document.getElementById("statusLogin").innerHTML  = "<br />Authentifizierung fehlgeschlagen.";
            document.getElementById("buttonLogin").setAttribute("style", "display:block;");
            
        }
        
        // Grafische Anpassungen
        document.getElementById("loadingLogin").setAttribute("style", "visibility:hidden;");
        //document.getElementById("loadingLogin").setAttribute("style", "display:none;");
        
        
    });

    get.fail(function() {
        // Grafische Anpassungen und Protokoll
        document.getElementById("buttonLogin").setAttribute("style", "display:block;");
        document.getElementById("loadingLogin").setAttribute("style", "visibility:hidden;");
        $("#seiteErsteinrichtung").removeClass("loading");
        alert( "Fehler beim Überprüfen der Zugangsdaten!" );
    })
    
}

If I build the app and run it on my iPhone i get this error through debugging with safari:

[Error] Preflight response is not successful. Status code: 401
[Error] XMLHttpRequest cannot load https://192.168.178.10/logincheck.php due to access control checks.
[Error] Failed to load resource: Preflight response is not successful. Status code: 401 (logincheck.php, line 0)

and looking for the headers thats what I got:

overview
URL: http://192.168.178.10/logincheck.php
Status: —
Quelle: —
Initiator:
jquery-2.2.2.min.js:4:16032


Request
Accept: */*
Authorization: BasicBasic VGVzdDoxMjM0NTY=
Origin: null
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Answer
no Response-Header

I've set all headers I could find online in my web config file sadly without success:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.web>
        <customErrors mode="Off" />
    </system.web>
    <system.webServer>
        <handlers>
            <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
            <!--<remove name="OPTIONSVerbHandler" /> !-->
            <remove name="TRACEVerbHandler" />
            <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
        </handlers>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Credentials" value="true"/>
                <add name="Access-Control-Max-Age" value="5000"/>
                <add name="Access-Control-Allow-Methods" value="GET,POST,DELETE,OPTIONS" />
                <add name="Access-Control-Allow-Headers" value="Origin, Authorization, Content-Type, Content-Range, Content-Disposition, Content-Description, X-Requested-With, X-ACCESS_TOKEN" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

If I remove the Authorization header from the request I atleast get an answer from the Server:

Overview
URL: https://apptest.itunds.de:17635/logincheck.php
Status: 401 Unauthorized
Quelle: Netzwerk
Adresse: 192.168.252.253:17635
Initiator:
jquery-2.2.2.min.js:4:16032


Request
POST /logincheck.php HTTP/1.1
Accept: */*
Origin: null
Accept-Encoding: gzip, deflate, br
Host: apptest.itunds.de:17635
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148
Accept-Language: de-DE,de;q=0.9
Content-Length: 0
Connection: keep-alive

Answer
HTTP/1.1 401 Unauthorized
Access-Control-Allow-Credentials: true
Content-Type: text/html
Access-Control-Max-Age: 5000
Access-Control-Allow-Methods: GET,POST,DELETE,OPTIONS
Date: Fri, 27 May 2022 07:42:08 GMT
Access-Control-Allow-Headers: Origin, Authorization, Content-Type, Content-Range, Content-Disposition, Content-Description, X-Requested-With, X-ACCESS_TOKEN
Content-Length: 1344
Access-Control-Allow-Origin: *
Server: Microsoft-IIS/8.5
X-Powered-By: ASP.NET
Www-Authenticate: Basic realm="192.168.178.10"

I have no idea whats causing this problem or how to fix it. I'm trying to fix that Problem no for almost 3 days and I can't find anything. I really need help with this.

CodePudding user response：

It's because there is no origin on WKWebView so the Preflight will fail. Did you set any origin and scheme in your config.xml ?

 <preference name="scheme" value="app" />
 <preference name="hostname" value="localhost" />

You can also try https://github.com/globules-io/cordova-plugin-ios-xhr