CODEWITHSUNDEEP
ajaxangularjsnode.jsexpressxmlhttprequest
OMGPOP
OMGPOP

Reputation: 942

Angular resource how to keep ajax header and enable cors at the same time

In my ng-resource files, I enable the ajax header: 

var app = angular.module('custom_resource', ['ngResource'])

app.config(['$httpProvider', function($httpProvider) {
    //enable XMLHttpRequest, to indicate it's ajax request
    //Note: this disables CORS
    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}])

app.factory('Article', ['$resource', function($resource) {
    return $resource('/article/api/:articleId', {articleId: '@_id'}, {
        update: {method: 'PUT'},
        query: {method: 'GET', isArray: true}
    })
}])

So that I can separate ajax and non-ajax request and response accordingly (to send json data like res.json(data), or to send the entire html page like res.render('a.html')

for example, in my error handler, I need to decide to render error.html page or to just send a error message: 

exports.finalHandler = function(err, req, res, next) {
    res.status(err.status || 500)
    var errorMessage = helper.isProduction() ? '' : (err.message || 'unknown error')

    if (req.xhr) {
        res.json({message: errorMessage})
    }
    else {
        res.render(dir.error + '/error_page.ejs')
    }
}

But now I need to do CORS request to other sites. Is it possible to do CORS request while keeping the ajax header? or other ways I can identify ajax and non-ajax request from server?

In case my question is not clear, heres a relevant article about angular and CORS http://better-inter.net/enabling-cors-in-angular-js/

Basically, we need to delete xhr header to enable cors for other server, but I need the header for my own server

EDIT 2:

today I tried integrating google map and I got this error: 

XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/geocode/json?address=Singapore&sensor=false. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

Upvotes: 14

Views: 3351

Answers (4)

Buyuk
Buyuk

Reputation: 1094

There are 3 solutions that come to my mind: 1. Ask site's admin to enable x-requested-with header in CORS. 2. Use proxy server. 3. Send request without x-requested-with header.

This article should make it clear how CORS works and how to make CORS requests. Particularly "Simple requests" section and "Access-Control" section, especially access-control-allow-headers description is important in this case.

As it says: for simple requests access-control-allow-origin is enough. However if the request includes custom header (a header which is not included by default, such as x-requested-with header), the preflight request is triggered, and server's response to this request should enable this custom header in access-control-allow-headers by setting its value to either "*" or to the name of a custom header (x-requested-with).

Hope it makes it a little bit clearer.

Upvotes: 0

Igwe Kalu
Igwe Kalu

Reputation: 14868

First, to address you primary concern is it possible to do CORS request while keeping the ajax header?: the answer is YES, provided the sites you are accessing allow requests from you or any other external clients at all.

You wrote:

//Note: this disables CORS
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';

But I don't understand what you mean by, it "disables CORS". The X-Requested-With header is not a standard header, and the known effect of adding a non-standard header to a request (made from a browser) is the triggering of a pre-flight request [3].

If the other sites you are interested in would set their servers to refuse processing of requests that do not originate from their own domain, then whether you set that header or not, your request should fail.

It seems everything is working fine for you, for requests sent to you own server. Otherwise you can solve the problem by appending the Access-Control-Allow-Origin header in your server responses as follows:

  1. if you need to allow requests from specific domains

    response.set("Access-Control-Allow-Origin", "one-host-domain, your-host-domain, some-other-host-domain"); // second argument is a comma-delimited list of allowed domains

    (It may be better for you to actually check the request object for the origin, and if it's permitted based on presence in a pre-determined list, then send back the exact same origin).

  2. If you need to permit all requests regardless of its origin

    response.set("Access-Control-Allow-Origin", "*");

That should do, and I hope it clears your doubts for you.

More info on handling CORS when using AJAX: 0, 1 & 2.

EDIT

Following exchanges in the comment, I add the following points to support this answer further.

As it is today, the only side that needs disabling/enabling CORS in the client-server system is the server. All modern browsers allow cross origin requests by default and you don't need to do anything additional to support that capability. I understood that you're adding a custom header to distinguish AJAX requests from the rest?? AFAIK, that header changes nothing about how requests are made by browsers.

Here is how all cross-origin requests are handled by browsers today: for all request methods (but usually with the exception of GET), browsers send a pre-flight request with the OPTION method. If the destination server allows it, the actual request is then sent, otherwise the request fails. In the case where the servers, responds with a refusal there's nothing you nor whatever library you use can do about it. This is the fact from my own experience.

Upvotes: 0

atinder
atinder

Reputation: 2090

you may try to use cors package

Upvotes: 0

Rahat Mahbub
Rahat Mahbub

Reputation: 2987

Setting custom headers on XHR requests triggers a preflight request.

So, it doesn't disable CORS but your server is most likely not handling the preflight request.

Inspired from this post: https://remysharp.com/2011/04/21/getting-cors-working

The solution should be to use the cors module and add the following to your node.js code before your routes:

var corsOptions = {
    origin: true,
    methods: ['GET', 'PUT', 'POST'],
    allowedHeaders: ['X-Requested-With','Content-Type', 'Authorization']
};

app.options('*', cors(corsOptions)); //You may also be just fine with the default options

You can read more at: https://github.com/expressjs/cors

Upvotes: 1

Related Questions