CORS issues

[ibsus]

When enabling wkwebview, requests to a webserver are from "null" and therefore rejected even with Access-Control-Allow-Origin set to *

[jgw96]

Hello! Thanks for opening am issue with us! Would you mind posting a repo that I can use to reproduce this issue? Also, does a request to the same server work without the plugin (on uiwebview) ?

[ibsus]

Unfortunately it is private source. Will try to recreate and send

On Thursday, August 18, 2016, Justin Willis notifications@github.com
wrote:

Hello! Thanks for opening am issue with us! Would you mind posting a repo
that I can use to reproduce this issue? Also, does a request to the same
server work without the plugin (on uiwebview) ?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#3 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AADMWKJ0rcdVY34FqbNKoA-EHQivaQkCks5qhRLugaJpZM4JoEyM
.

[jgw96]

Thanks, much appreciated!

[ghenry22]

I might have a less strict web service that I am connecting to but I have no problems with HTTP requests. If there is something specific that it's useful to check I can try and log more detail on my server to confirm if that's useful

[manucorporat]

@ghenry22

I have no problems with HTTP requests

so HTTPS?

[leonardoalemax]

i`m geting the same error here with the plugin:

looking forward to use it in prod, nice job guys, you are awesome!

[ghenry22]

I'll try HTTPS but won't get time until Monday.

[calendee]

Also seeing the origin null is not allowed by Access-Control-Allow-Origin.

The problem does not exist in the traditional UiWebviuew.

Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load https://XXXXXXX.com/AuthenticateUser. Origin null is not allowed by Access-Control-Allow-Origin.

[calendee]

Here's a screenshot showing how the OPTIONS pre-flight has an origin of null.

[danbucholtz]

@calendee, can you take a screenshot of the above with UIWebView?

Thanks,
Dan

[leonardoalemax]

it`s not the same request from calendeen, but using UIWebView this is my request:

using WKWebView i`m getting the same as him.

[manucorporat]

@calendee is your server crashing?

[calendee]

@manucorporat Nope - no crashing. The server is just returning 500 because the OPTIONS preflight has null in the origin.

FYI: In UiWebView, I don't send OPTIONS preflights; so, I don't get this problem and can't screenshot it for you.

• I guess that's the real question : Why does WkWebView send an OPTIONS preflight while UIWebView does not?

[peterpeterparker]

In my case I definitely have that error result when Access-Control-Allow-Origin isn't set to *

My node JS server define headers like following:

res.header("Access-Control-Allow-Origin", "https://mydomain.com");
res.header("Access-Control-Allow-Credentials", "true");
res.header("Access-Control-Allow-Headers", "Origin, Authorization, Content-Type, Content-Range, Content-Disposition, Content-Description, X-Requested-With, X-ACCESS_TOKEN");
res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");

Which lead to the error we are speaking about with WkWebView. I tried the experiment to change following line and I didn't faced the error anymore, I was able to log in and use my app and own server services with WkWebView.

res.header("Access-Control-Allow-Origin", "*");

Of course that was only an experiment, because I also use other API that can't make this change and also I'm not really willing to. But in my case, that is the reason for the error "origin null is not allowed by Access-Control-Allow-Origin"

P.S.: I use HTTPS

[mbrookson]

I am seeing this as well. I've installed the WKWebView plugin, but now web requests just don't work because of the Access-Control-Allow-Origin rules which don't matter with UIWebView. The error says Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin.

I've tried adding

<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval' 'unsafe-inline'; connect-src * 'unsafe-eval'; object-src *; style-src * 'unsafe-inline'; img-src *">

to index.html but this didn't resolve the issue

[daviddk]

Also seeing this problem, It seems WkWebView is just sending out requests with the 'Origin' header set to null. For UiWebView it was set to 'file://' and didn't give any problems.

[PapyElGringo]

Same here any solution found on your side guys?

[willadamskeane]

I'm having this issue as well.

[VinKamat]

Seeing the same issue. Would love to use this plugin. It's as if the most important aspect of an app making http calls is now not possible. Weird.

Error:
XMLHttpRequest cannot load http://myserver.com/api/login. Origin null is not allowed by Access-Control-Allow-Origin.

Any workarounds? solutions?

[danbucholtz]

All - @manucorporat is working on this bug. I believe he's AFK for a week or so. He'll get back to this shortly.

Thanks,
Dan

[mbrookson]

That's good news! :)

Bit of a shame to have such a big issue with this straight away which stops many apps from working at all, even after the plugin has had a blog post and is promoted by Ionic. This plugin seems really promising for performance though and looking forward to using it!

[vuhung3990]

i have same issue : Origin null is not allowed by Access-Control-Allow-Origin

[danbucholtz]

@mbrookson,

Yeah, it's a little unfortunate, but that's why we're asking for beta testers now vs releasing it and saying it's good to go 😄. We've now identified a major issue that we need to fix, so that's great. We did test HTTP and didn't have any issues, but it must have been with the way our server was configured. We are all swamped right now getting Ionic V2 ready to go. Hopefully, the plugin will be ready for prime time to correspond with Ionic V2 RC.

Thanks for checking it out everyone, the issues submitted so far have been great!

Thanks,
Dan

[lordgreg]

Same issue.

[cvenzin]

Same here

[manucorporat]

I am not in town until September 1st. Are you guys tried debugging this bug server side?
I don't think we can change anything in this plugin to fix this issue (I might be wrong).

http://stackoverflow.com/questions/36000757/cordova-ios-error-origin-null-is-not-allowed-by-access-control-allow-origin

[manucorporat]

Update to the current version of WK plugin! all the issues should have been fixed now

[sfaizanh]

@manucorporat any release or we use master branch?

[JiaLiPassion]

@manucorporat , thank you for the new release, but if server not enable cors, we will still get preflight request not success or other cors error when request remote API even with the GCDWebserver which brought into wkwebview-plugin 3.0, is that corrent?

[manucorporat]

@JiaLiPassion yes, CORS can't be disabled in WK

[manucorporat]

@sfaizanh master

remove everything cordova folder (plugins, platforms) and re add the platform ios

[sfaizanh]

@manucorporat Thanks

[JiaLiPassion]

@manucorporat , thank you! got it, so if server disable cors, I still need to use some native HTTP solution such as use cordova HTTP or use the GCDWebServer as a proxy, do you think the proxy should be a option feature and add into wkwebview? If so, I would like to make a PR to implement it, I am not sure that disable cors in server side is a common requirement or not.

[progresivoJS]

@ataraxus 👍 your solution save my day.

[awebdeveloper]

i am on 1.1.2-dev version I see the domain as localhost. I dont see ionic.local. why ?

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

[sneas]

Hey guys. Here is my solution to CORS issues with WKWebView. It is not a silver bullet. You can not use XMLHttpRequest directly. But you can use Angular Http service with it https://github.com/sneas/ionic-native-http-connection-backend

[sfaizanh]

@daveshirman is your Server URI scheme is http or https?

[sneas]

@daveshirman can you wrap your first endpoint request with Platform.ready()? So it looks like this

this.platform.ready().then(() => {
  this.http.get('url')
});

The reason for this is the library uses cordova plugin to perform HTTP requests which could be initiated in few seconds after app has started.

Right now I'm working on the new version of the lib which uses new HttpClientModule and eliminates the necessity of wrapping the first request in Platform.ready.

UPD

Troubleshooting section has been added to readme.

[daveshirman]

@sfaizanh the scheme is https, connecting to an AWS lambda function, with CORS enabled.

@sneas Thanks for your reply.

I'm calling this way after the app has started, so platform ready isn't the issue. I don't understand from your readme what changes to make in the app.module.ts though as I said.

It's not clear whether I'm supposed to be removing the already existing HttpModule import in app.module.ts.

Thanks for your assistance.

[sneas]

@daveshirman, you don't need the module in the example service.

All you need to do is to add NativeHttpModule into imports section of your app module and add {provide: Http, useClass: Http, deps: [NativeHttpFallback, RequestOptions]} into providers section of your app module.

[daveshirman]

@sneas ok, but do I also need to remove the existing HttpModule in the imports section like I asked?

I've done your integration but it still doesn't give anything other than http.status: 0 and url: null.

[sneas]

@daveshirman you don't need HttpModule in imports because it's provided by Ionic. Btw you can Slack me in ionic-worldwide.slack.com (dima)

[daveshirman]

@sneas ok, well having removed it as I said, I still am getting the same error.
Is there anything else you can think of that I need to set up/change in the ionic config? This isn't working right now following your import instructions. Thanks.

[sneas]

@daveshirman does window.cordovaHTTP2 exist on your device/emulator?

[daveshirman]

@sneas Now we're getting somewhere! Good catch. So window.cordovaHTTP2 is definitely undefined on both desktop browser + device (iOS). The desktop I would expect as there's no cordova either.

I've checked that the plugins are installed and in the ios.json file too:

        "cordova-plugin-advanced-http": {
            "PACKAGE_NAME": "com.mydomain.myapp"
        }

[sneas]

@daveshirman you have to run ionic cordova plugin add cordova-plugin-http2 to install the needed plugin and make sure it exists in the device environment. Also for your attention: this will not affect your browser environment in any way. When running in browser ionic-native-http-connection-backend makes requests with regular XmlHttpRequest. And when running on device it uses cordova-plugin-http2 to perform requests.

[daveshirman]

@sneas Ok, well I'd already done that as I stated. But I removed and re-added and it is defined now. Now my uploads are going to the server (S3 bucket) but the policy is complaining that there should only be one parameter specified.

Is there anything you're doing in your module that modifies the payload at all that isn't documented?

Thanks for all your help, greatly appreciated.

[sneas]

@daveshirman, no the library does not modify payload. I can have a closer look if you share an example of request which works correctly with UIWebView but not with the library.

[daveshirman]

@sneas Ok, thanks for your help, but I'm now running into the issue with Android not compiling now because .patch method isn't supported - which I saw in your known issues. This isn't the right approach to fixing the issue I think. Thanks.

[Piraban]

will they fix it or any solution? ionic is headache

[stellmaurer]

The solution for me was to use UIWebView instead of WKWebView. Follow the steps in the link to do that, http://uncaughterror.com/programming/ionic3/preflight-response-issue-with-ionic3-app-on-ios-build-only-resolved/.

[caferelgin]

I got it working using WKWebView after adding the following lines to config.xml;

<platform name="ios">
 <access origin="http://localhost:8080" />
  <allow-navigation href="http://localhost:8080/*" />
</platform>

Cheers!

[sahibjotsingh]

@caferelgin Thanks. I tried your approach, but it didn't work.