0

I'm using this book to learn AngularJS where I build this webapp with Angular, Node, Deployd. Now, my app stays at localhost:5000/app.html, 5000 is the port where node web server listen. I try to retrieve my data stored with deployd in this way:

$http.get("localhost:5500/products")
    .success(function (data) {
        $scope.data.products = data;
    })
    .error(function (error) {
        $scope.data.error = error;
    });

But this cause an error: no 'Access-Control-Allow-Origin' header is present on the requested resource. How can I solve this? Thanks :)

Ursus
  • 27,319
  • 3
  • 23
  • 42
  • Read the error message a bit more. doesn't it say something about a same origin policy? Did you research what the same origin policy is? There's very little that you can do with angularjs to solve this problem. – Kevin B Aug 04 '14 at 14:55
  • Well, I think it's not the same origin cause the port is different. But I can't solve this. Also, I'm working in local so I didn't expect these sort of issues. – Ursus Aug 04 '14 at 15:01
  • it gives me the same error with google chrome, but not with safari and firefox, to disable it in google chrome -> http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome – ThomasP1988 Aug 04 '14 at 15:01
  • No, it definitely is the same origin issue. different port means different origin. – Kevin B Aug 04 '14 at 15:02
  • @ThomasP1988 how did you instruct your users to do the same after you release the application to the public? – Kevin B Aug 04 '14 at 15:03
  • Yes, I know but in the book the author not mention this. It's like he didn't have this issue. – Ursus Aug 04 '14 at 15:03
  • Likely because he's using the same origin for both api and web client. same port protocol and domain. – Kevin B Aug 04 '14 at 15:04
  • If he isn't, then his api (or service) is correctly implementing CORS to satisfy the same origin policy. – Kevin B Aug 04 '14 at 15:05
  • Uh, my problem is the same of this http://stackoverflow.com/questions/23346863/deployd-data-retrieved-via-angularjs-cors?rq=1 – Ursus Aug 04 '14 at 15:15
  • Which book are you reading? If it's Pro AngularJS, I posted a solution to that problem at http://stackoverflow.com/questions/23346863/deployd-data-retrieved-via-angularjs-cors/23434583#23434583 The solution is to upgrade your deployd server. The more recent version of the deployd server adds the CORS headers, thus you do not get that error anymore. – javaauthority Dec 24 '14 at 16:22

1 Answers1

3

Kevin B is right. It's the Same Origin Policy blocking your request.

What you should do here is to direct your requests from the client to your node server ("/products"). Here, you can easily proxy them to localhost:5500, e.g. using node-http-proxy (https://github.com/nodejitsu/node-http-proxy).

From the node-http-proxy README.md (adapted the host/port to your use-case):

var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer(options);
require('http').createServer(function(req, res) {
  proxy.web(req, res, { target: 'http://localhost:5500' });
});

It might be, that this interferes with your current node server (serving you the client-side angular code in the first place). In case you're using Express for this, you can combine "http" and "http-proxy" like this: https://stackoverflow.com/a/22244101/3651406

Community
  • 1
  • 1
NicBright
  • 5,219
  • 4
  • 15
  • 17
  • var connect = require('connect'); var serveStatic = require('serve-static'); var app = connect(); app.use(serveStatic('../angularjs')); app.listen(5000); This is my server. Can you help me to fix it? – Ursus Aug 04 '14 at 17:46
  • put this in between app.use(...) and app.listen(...): app.get("/deployd/*", function(req, res){ proxy.web(req, res, { target: 'http://localhost:5500' }); }); Then you have to change the request in your client to go to "/deployd/products" – NicBright Aug 04 '14 at 18:24