Successful POST request's promise is rejected

[alexpyoung]

Hi, apologies for such a trivial problem but I'm really scratching my head here.

In my view model I configure the fetch client (example is attempting Github OAuth) like so:

constructor(
    http
) {

    http.configure(config => {

        config
            .useStandardConfiguration()
            .withBaseUrl('https://github.com/')
            .withDefaults({
                mode: 'no-cors',
                headers: {
                    'Accept': 'application/json'
                }
            });
    });

    this.http = http;
}

After successfully authorizing the client and receiving an verification code, I request an access token:

requestAccessToken() {

    let url = 'login/oauth/access_token';
    url += `?client_id=${ this.client_id }`;
    url += `&client_secret=${ this.client_secret }`;
    url += `&code=${ this.oauth_code }`;

    return this.http.fetch(url, {
        method: 'POST',
    });
}

The request returns a 200 status with the appropriate body, however the Promise returned is always rejected and I am unable to access the response. i.e.

requestAccessToken()
    .then(
        response => {
            // Never invoked
        },
        error => {
            // Always invoked
        }
    );

[bryanrsmith]

What's the error that it rejects with? What do you see in the console? Without more information I can only guess, but I suspect it's because you're using mode: 'no-cors' on a cross-origin request. Do you get a different result if you change it back to the default of 'cors'?

[bryanrsmith]

Feel free to reopen this if there's more I can do to help.

[alexpyoung]

@bryanrsmith the error response looks like so:

Is it possible to make CORS requests with the fetch client then if I exclude mode: 'no-cors'? Alternatively, I might try JSONP with the HTTP client.

[alexpyoung]

Whoops. Trying to POST with JSONP is no fun. But it looks like you were looking in the right direction @bryanrsmith. Without mode: 'no-cors':

Fetch API cannot load https://github.com/login/oauth/access_token...
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:9000' is therefore not allowed access. 
If an opaque response serves your needs, 
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Github indicates it supports CORS so I wonder what's going on. Is this an issue with the fetch-client?

[bryanrsmith]

The type: "opaque" in the response means that you cannot read the response from javascript. This is why you're seeing the rejection, and it is expected from no-cors requests. You can read about this on MDN. As you can see from the second error message, GitHub is not attaching CORS headers to the response. I googled the URI you're requesting and found this: isaacs/github#330.

Hope this helps.

[alexpyoung]

It looks like this might be a dead-end for my current implementation, as my client_secret is indeed exposed on my demo app. Appreciate the lead.

[KOueslati]

You can set a no-cors mode like the code below

var myHeaders = new Headers();
var myInit = { method: 'POST',
headers: myHeaders,
mode: 'no-cors',
cache: 'default' };

return this.http.fetch(url, myInit);