NetworkError: 405 Method Not Allowed to get user info via Google Api

Question

I´m trying to get the user profile information described here: http://code.google.com/intl/es-ES/apis/accounts/docs/OAuth2Login.html

but am getting this error:

"NetworkError: 405 Method Not Allowed - https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=token"

am using the web server application protocol to get the token :

this is my code:

var xhrArgs = {

        url : "https://www.googleapis.com/oauth2/v1/userinfo?alt=json",
        content : {
            access_token : access_token
        },
        load : function(data) {
            console.log(data);
        },
        error : function(error) {
            console.log(error);
        }
};
dojo.xhrGet(xhrArgs);

Hope some one can help, Thanks in advance

Answer 1

You have run up against the cross-origin resource sharing (CORS) protocol. Mozilla has a nice intro to CORS. You are making a cross-origin XHR, and for the call to succeed, you need to make a small change, or else workaround by proxying the request through your own server.

That said, I believe there is an error in Google's still "experimental" service, and you won't be able to get this to work until they fix it. Furthermore, IE9 and earlier do not support CORS; IE10 plans to do so.

The HTTP Method not being allowed by the server is the OPTIONS method. What the hey? You specified a HTTP GET, right? Yes, you did. However the CORS protocol requires the browser, under certain conditions, to "preflight" the request. To preflight, the browser sends an OPTIONS request to the URL, to see whether the server will allow you to make the GET request. In this case, your dojo.xhrGet call, behind your back, is adding a "X-Requested-With: XMLHTTPRequest" header to your request. Sending a non-standard header like X-Requested-With is one of those "certain conditions" that triggers a preflight.

Fortunately, you can suppress that header by adding

headers:{'X-Requested-With': null},

to your xhrArgs parameter.

After you do that, you will be sending a valid CORS request. However, in my experience just today, Google does not properly honor the CORS request. One of the settings in Google's API Console on the "API Access" tab, under "Client ID for web applications", is "JavaScript origins". Here you list the origin e.g. https://example.com of any web page that will make one of these cross-origin requests. Here's the error report from Chrome:

XMLHttpRequest cannot load https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token={elided}. 
Origin https://example.com is not allowed by Access-Control-Allow-Origin.

Inspecting Google's response headers shows they send no Access-Control-Allow-Origin at all.

In my case, since I just created an app hours ago, maybe Google hasn't yet propagated the "allowed origin" information to the system; possibly this call will work tomorrow. Or, it's just a bug in this experimental feature.

Workaround: I just have my nginx server proxy the request to Google.

   location /userinfo {
             proxy_pass https://www.googleapis.com/oauth2/v1/userinfo;
             proxy_redirect default;
    }

Then I send the xhrGet to "/userinfo" and all works perfectly.

dojo.xhrGet({
             url:  '/userinfo',
             handleAs: 'json',
             headers:{'X-Requested-With': null}, //superfluous now
             content: {alt: 'json', access_token: params.access_token}
           }).then(...)