Enable CORS via Javascript (Phonegap)

Question

I’m creating a Phonegap application that consumes a Web API (Web Service), and I need to access an external domain. Searching through the web I found that CORS should be enabled via Javascript to be able to access other domains. This way I’d like to know which way to do it.

Below is the code of a search made by the app.

function find()
{
  var urlAl = 'http://*********/api/Produtos';
  header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");

  $.ajax({
    type : "GET",
    dataType : "jsonp",
    url : urlAl,
    success: function(data){
      alert(data);
    },
    error: function()
    {
      alert("erro");  
    }
});

Answer 1

In the Phonegap

From other Stackoverflow questions (translated freely into English):

Phonegap supports Cors?

RE:

Yes it supports, all you have to do is add that line to your file config.xml:

<access origin=“http://example.com” />

You can do that too:

<access origin=“*” />

Another answer:

Cors and Phonegap Apps

With Phonegap you can only make XHR requests directly to remote servers and they should simply work. The policy of Cross-domain does not apply to Phonegap (for several reasons, basically because your App is running from the URI file:// in the device).

Please keep in mind that you will have to set up a Whitelist for your Apps to access external domains. Please check this link:

http://docs.phonegap.com/en/1.8.0rc1/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide

I hope this clarifies your doubt; below are instructions for if this was a request in the browser.

In the browser

It would require you to change your server to support Cors by adding a Header Access-Control-Allow-Origin for the domain that Phonegap runs on top of - could be a wildcard (*) to accept all origins. Depending on the type of request you need to make, you will need to implement "pre-flight" routes, which are only routes OPTIONS for your application, which respond with headers. This shouldn’t be hard to do, but will depend on your server.

In Node.js, for example, you could use the module cors and solve the problem on the server with one or two lines:

app.use(cors());
app.options(‘*’, cors());

This done, simply change your request to enable CORS in client-side (documentation):

$.ajax({
  // …
  crossDomain: true,
});

If you wanted to pass/receive cookies from the server, you would need to make another modification:

$.ajax({
  // …
  xhrFields: {
    withCredentials: true,
  },
}); 

In that case the server would also have to include the header Access-Control-Allow-Credentials. In the case of Node.js, it would be enough to change cors() for cors({ credentials: true }).