Wkwebview Origin Null Is Not Allowed by Access-Control-Allow-Origin

Cordova iOS error: Origin null is not allowed by Access-Control-Allow-Origin

@jcesarmobile was correct. Simply adding the httpProtocol to my web.config wasn't enough. I also had to add the following code to global.asax Application_BeginRequest:

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*")
    If HttpContext.Current.Request.HttpMethod.Equals("OPTIONS") Then
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE")
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept")
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000")
        HttpContext.Current.Response.End()
    End If

WkWebview local site Access Origin

I tried the exact same code with your folder structure and this worked for me so I think this error originates from the html content.

Try and see if any of these help you:

Set he allow read access on the directory

// I added
let directoryURL = Bundle.main.resourceURL!.appendingPathComponent("iosbuild")

// your code
let url = Bundle.main.url(forResource: "index",
                          withExtension: "html",
                          subdirectory: "iosbuild")!

// changed read access
webView.loadFileURL(url, allowingReadAccessTo: directoryURL)

This could be CORS related, so add a webview configuration

// Configure this before instantiating web views
// Worked for me in the past with CORS errors
let configs = WKWebViewConfiguration()
configs.setValue(true, forKey: "_allowUniversalAccessFromFileURLs")

let webView = WKWebView(frame: view.bounds, configuration: configs)
self.view.addSubview(webView)

// rest of your delegate set up
webView.navigationDelegate = self
webView.uiDelegate = self
webView.configuration.defaultWebpagePreferences.allowsContentJavaScript = true

// your code
let url = Bundle.main.url(forResource: "index",
                          withExtension: "html",
                          subdirectory: "iosbuild")!

// this is back to your own code but if it doesn't work
// you can try allowing the read access on the directory like before
webView.loadFileURL(url, allowingReadAccessTo: url)

Give these a go and see if this gives you any luck

XMLHttpRequest Faults after WKWebView Upgrade on Ionic v1 project/app

config.xml

Access

« Define the set of external domains the app is allowed to communicate
with. The default value shown above allows it to access any server. »
See documentation.

This setting has nothing to do with the origin of your app when performing requests.

According to your config.xml, your app is only allowed to communicate with http://localhost:8080/*. You obviously want to use * here (or your server url if your app only makes requests to your server).

<access origin="*"></access>

WKWebView

iOS Preferences

« Since version 3, apps are served from ionic:// scheme on iOS by default.

The default origin for requests from the iOS WebView is
ionic://localhost. If Hostname and iosScheme preferences are set, then
origin will be iosSchemeValue://HostnameValue.

Values like http, https or file are not valid and will use default value instead. »

See documentation.

On your server, you need to allow the origin ionic://localhost.

Assuming you want Android devices to able to communicate with your server as well, you need to allow both ionic://localhost and http://localhost, or * to allow all origins.

Server

You can allow both origins in your server like that for example.

$allowedDomains = ['ionic://localhost', 'http://localhost'];

if (in_array($_SERVER['HTTP_ORIGIN'], $allowedDomains)) {
    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
}

“Origin null is not allowed by Access-Control-Allow-Origin” error for request made by application running from a file:// URL

For the record, as far as I can tell, you had two problems:

1. You weren't passing a "jsonp" type specifier to your $.get, so it was using an ordinary XMLHttpRequest. However, your browser supported CORS (Cross-Origin Resource Sharing) to allow cross-domain XMLHttpRequest if the server OKed it. That's where the Access-Control-Allow-Origin header came in.

2. I believe you mentioned you were running it from a file:// URL. There are two ways for CORS headers to signal that a cross-domain XHR is OK. One is to send Access-Control-Allow-Origin: * (which, if you were reaching Flickr via $.get, they must have been doing) while the other was to echo back the contents of the Origin header. However, file:// URLs produce a null Origin which can't be authorized via echo-back.

The first was solved in a roundabout way by Darin's suggestion to use $.getJSON. It does a little magic to change the request type from its default of "json" to "jsonp" if it sees the substring callback=? in the URL.

That solved the second by no longer trying to perform a CORS request from a file:// URL.

To clarify for other people, here are the simple troubleshooting instructions:

1. If you're trying to use JSONP, make sure one of the following is the case:
   
   
   • You're using $.get and set dataType to jsonp.
   • You're using $.getJSON and included callback=? in the URL.
2. If you're trying to do a cross-domain XMLHttpRequest via CORS...
   
   
   1. Make sure you're testing via http://. Scripts running via file:// have limited support for CORS.
   2. Make sure the browser actually supports CORS. (Opera and Internet Explorer are late to the party)

---

Related Topics