Question

I have a JQuery Mobile app. This app needs to hit a remote web service. When I run the app from my local file system, the app loads fine. But then, when I click a button, I try to interact with the web service. When I attempt to hit the web service, I see an error in the console that says:

XMLHttpRequest cannot load https://www.mydomain.com/myService/myAction. Origin null is not allowed by Access-Control-Allow-Origin

I try to hit the service with the following code:

var vm = getParameters();
$.ajax({
  url: https://www.mydomain.com/myService/myAction,
  type: "POST",
  data: JSON.stringify(vm),
  contentType: "application/json",
  success: action_Succeeded,
  error: action_Failed
});

What am I doing wrong? I tried everything in this post without any luck: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.

My app works when I run it via Visual Studio. My hunch is that its running with in a context of a web server at that point. However, I want to deploy this via PhoneGap. Because of that, running within the context of a web server is out of the question. That’s why I figured if I ran it via my local file system and everything worked, I should be good. What am I doing wrong?

Thank you so much!

Answer 1

Check your config.xml file (if you’re using the Phonegap Build service – otherwise check the .plist file for iOS, AndroidManifest.xml for Android..), and add this line:

<access origin="*" />

If this works, then you can try to set a more restrictive access rule like:

<access origin="https://mydomain.com" subdomains="true" />

And on your server side, you’ll need to return this http header:

Access-Control-Allow-Origin: *