CODEWITHSUNDEEP
angularjsnode.jsapirestcors
matt2mi
matt2mi

Reputation: 154

CORS issue with node rest api and angularJS app on 2 ports

I have the classical CORS issue with my angularJS app (on localhost:9000) trying to catch my node server (on localhost:9001)

Here my rest api (app.js) code :

var cors = require('cors');
app.use(cors());
app.options('*', cors());

app.all('/*', function(req, res, next) {
    // CORS headers
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header('Access-Control-Allow-Methods',    'GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
    if (req.method == 'OPTIONS') {
        res.status(200);
        res.write("Allow: GET,PUT,POST,DELETE,OPTIONS");
        res.end();
    } else {
        next();
    }
});

As you can see, i've tried those solutions in vain :

And here's the simple $http call in webapp :

var req = {
    method: 'GET',
        url: 'localhost:9001/memories'
    };
    $http(req).
        success(function(data, status, headers, config) {
            // this callback will be called asynchronously
            // when the response is available
            reutrnStatus.success = true;
            reutrnStatus.msg = status;
            memories = data;
        }).
        error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            reutrnStatus.success = false;
            reutrnStatus.msg = status;
        });

I tried some solutions in webapp too (in app.js) :

// Enable AngularJS to send its requests with the appropriate CORS headers
// globally for the whole app:
.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    /**
     * Just setting useXDomain to true is not enough. AJAX request are also
     * send with the X-Requested-With header, which indicate them as being
     * AJAX. Removing the header is necessary, so the server is not
     * rejecting the incoming request.
     **/
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

But i'm close to give up because it's still not working... That's giving me this same error :

XMLHttpRequest cannot load localhost:9001/memories. Cross origin
requests are only supported for protocol schemes: http, data, chrome, 
chrome-extension, https, chrome-extension-resource.

And just to be fully clear, i followed that tutorial for the rest api :

Upvotes: 1

Views: 1560

Answers (1)

Pier-Luc Gendreau
Pier-Luc Gendreau

Reputation: 13814

You are making a request to an unknown protocol.

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

You need to change this:

method: 'GET',
    url: 'localhost:9001/memories'
};

...to this:

method: 'GET',
    url: 'http://localhost:9001/memories'
};

Alternatively, you could set it to //localhost:9001/memories and the browser will use the current protocol which is useful if you're serving resources over both http and https.

Although unrelated, your callbacks have typos in the variable names.

Upvotes: 6

Related Questions