Ajax request from another domain using AngularJs

Question

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 :)

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
– Kevin B, Commented Aug 4, 2014 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
– Ursus, Commented Aug 4, 2014 at 15:01
it gives me the same error with google chrome, but not with safari and firefox, to disable it in google chrome -> stackoverflow.com/questions/3102819/… — t0mpl
– t0mpl, Commented Aug 4, 2014 at 15:01
No, it definitely is the same origin issue. different port means different origin. — Kevin B
– Kevin B, Commented Aug 4, 2014 at 15:02
@ThomasP1988 how did you instruct your users to do the same after you release the application to the public? — Kevin B
– Kevin B, Commented Aug 4, 2014 at 15:03

Community · Accepted Answer · 2017-05-23 11:43:44Z

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

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Aug 4, 2014 at 16:35

NicBright

8,0095 gold badges21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ursus Over a year ago

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?

NicBright Over a year ago

put this in between app.use(...) and app.listen(...): app.get("/deployd/*", function(req, res){ proxy.web(req, res, { target: 'localhost:5500' }); }); Then you have to change the request in your client to go to "/deployd/products"

Collectives™ on Stack Overflow

Ajax request from another domain using AngularJs

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related