AngularJS + Ngingx CORS

Im trying to have the following setup:

API

api.domain.com

APP

domain.com

I've setup 2 different nginx configs, one for each of the 2 urls. Both of them work when doing regular GET requests in the browser (api.domain.com/test) but it all falls apart when doing a $resource call from angularjs (POST). This returns a

     not allowed by Access-Control-Allow-Origin.

I've been going on this for a while now and been playing around with different config files. I'm currently using the following file but i have no idea if this should work.

http://paste.laravel.com/h6U

Any help would be greatly appreciated

You can refer to this post.

I'm also new to angularjs. And I write my back-end code with nodejs. When tried to use the api by the backend in frontend with angularjs, I met the same problem like you.

So I use nginx to store my app, and then in my /etc/nginx/conf.d/default.conf file I can change the router with nginx, and in this way can avoid the problem caused by Access-Control-Allow-Origin.

Hope this can help you.

For CORS to work with in Angular JS, try adding this config to your application's angular module

angular.module('simpleRESTapp')
.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
}])

For the Nginx side,you'll need to configure nginx or your application server to return an Access-Control-Allow-Origin header containing the value of the Origin header sent by the client if it matches the allowed list. I guess this config should work,

if ($http_origin ~ "^(http://developers.example.com|http://example.com)$") {
    add_header "Access-Control-Allow-Origin" $http_origin;
}