2

I am trying to connect my cordova/phonegap application with my node.js server. Problem is, I get this error "XMLHttpRequest cannot load http://127.0.0.1:1234/api/users. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access. The response had HTTP status code 500. " . I tried adding this middleware to my node.js server, entering my phonegap domain, then, just for testing purpouses of course, I figured I will allow ALL domains for CORS, still no luck. This is what I used on my node.js server:

app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware

    next();
});

And I am doing a pretty simple AJAX request from my phonegap application, which I think is pretty much correct. I am getting this error on my phonegap app and on the node.js server console I get an error from one of the controllers, saying can't see property X of undefined, which undefined is my req.body. Here is the request:

var serverURL = 'http://127.0.0.1:1234';
    var body = {

        userId : '123A',
        comment: {
            from: '123B',
            content: 'I am a new generation of 123! :)'
        }
    };
    var bodyToString = JSON.stringify(body);


    $.ajax({url: serverURL + "/api/plates", dataType: "json", type: "PUT", data: bodyToString}).done(function (data) {
        alert(data);
    });
Boyan Hristov
  • 1,067
  • 3
  • 15
  • 41

1 Answers1

2

Allowing * origin access on your node server is a bad idea. http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html you can declare all domains to be supported by your app in phonegap itself, using element in cordova.xml. have a look at this Phonegap Cross-domain AJAX POST Request not working on Android

Edit

: From comment below: if you need to allow access to any origin from chrome just for development purpose there is a plugin https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Community
  • 1
  • 1
Naeem Shaikh
  • 15,331
  • 6
  • 50
  • 88
  • I did it for the sake of experimenting. I am not inteding to deploy it like that. But nothing happens although I did that. Could you explain what you mean by declaring it in cordova.xml? Node.js and Cordova are now fully separate, I am not using connect-phonegap or something like that. Node is running on localhost, cordova on another localhost for the moment. My intention is to have node.js on a cloud, cordova on a device of course and connect them – Boyan Hristov Oct 16 '14 at 12:05
  • Cross origin requests are blocked by browser. If you are using phonegap and running your code in web view you have the freedom to define which domains you should not restrict. You are tring to allow all origins using node js. Which is your server, this is not a good idea. You can allow the access to all origins from your app i.e. from phonega. You just need to mention the domain name in a tag named access. – Naeem Shaikh Oct 16 '14 at 12:11
  • Cross origin requests are blocked by browser. If you are using phonegap and running your code in web view you have the freedom to define which domains you should not restrict. You are tring to allow all origins using node js. Which is your server, this is not a good idea. You can allow the access to all origins from your app i.e. from phonega. You just need to mention the domain name in a tag named access. – Naeem Shaikh Oct 16 '14 at 12:11
  • I can't find any information about that "access tag". Could you point me to an article/show me an example? – Boyan Hristov Oct 16 '14 at 12:14
  • Edited my answer to include a link. Can you find a tag with name access in config.xml in your phonegap project – Naeem Shaikh Oct 16 '14 at 12:20
  • It is by default, I also used $.support.cors = true; in my phonegap controller, and still, same error – Boyan Hristov Oct 16 '14 at 12:32
  • No. Not. This is only for making access to local json or xml giles via ajax at runtime i.e. for files located inside your own app. Mention another tag just below it. And remove all your server code for allowing all origins. – Naeem Shaikh Oct 16 '14 at 12:46
  • Alright, thanks mate! :) And could you please suggest something for development from pc? I am running a localhost to run the www cordova folder in my chrome browser, can I enable cors there too? – Boyan Hristov Oct 16 '14 at 12:54
  • No browsers are not meant to allow cors. – Naeem Shaikh Oct 16 '14 at 13:09
  • I found [this](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi) nice plugin for google chrome, if you could add it to your answer for other users, it might as well be very useful for somebody like me. – Boyan Hristov Oct 16 '14 at 22:58