HTTP 200 but Access-Control-Allow-Origin denied with POST with Dribbble API

I am working in Dribble's API and getting this error message:

XMLHttpRequest cannot load https://dribbble.com/oauth/token?client_id=08b8dec4ee5c7af3edd96e0a27eb97f8…a739&code=2806099a944253b647afe25ba384d68a90ca04158a1d1dceadddfe076de941f0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.

I have already tried many different ways to set Access-Control-Allow-Origin = '*' but none of them worked for me, but reading the console.log(res._headers) i can see that it is being defined, i am sending this through a POST request but the header is not working. This one of the ways i have defined in app.js on Express v4 to set the header.

app.all("/", function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST, OPTIONS");
  res.header("Access-Control-Expose-Headers", "ETag, Link, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset");
  res.header("Access-Control-Max-Age", "86400");
  res.header("Access-Control-Allow-Credentials", true);
  return next();
});

And this is how i am sending the POST request with Axios:

export const postUserOAUTH = code => ((dispatch) => {
  axios({
    url: `https://dribbble.com/oauth/token?client_id=${clientId}&client_secret=${clientSecret}&code=${code}`,
    method: 'post',
  }).then((response) => {
    dispatch({ type: 'shots', payload: { registerResponse: response.data, token: response.data.access_token } });
    console.log('ok')
  }).catch((error) => {
    dispatch({ type: 'shots', payload: { registerResponse: error.message } });
    console.log('error')
  });
});

Edit: Now the problem changed a little, the code status is 200, i received the token in response from my request by the API but still having the same error the code is still going inside the .catch not in the .then, i have attached a link of the Image Error. I don't think this a problem about authentication since i am now getting the response that i want, but with this error i can't work with promises in my code. Step 2. Dribbble redirects back to your site.

Solution

It looks like you're trying to set headers on the response object instead of the request (and the headers you are trying to set are headers that the server will set on a successful CORS request). Instead, try this:

app.all("/", function(req, res, next) {
  req.header("Origin", "*"); // ideally the '*' will be your hostname
  return next();
});

The server should then respond with the headers you were trying to set on the object.

Disclaimer: I don't know Express, this code may not work as written, but hopefully you get the idea.

For more info on CORS check out: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Also, you can see our example setting the Origin header here: http://developer.dribbble.com/v1/#cross-origin-resource-sharing

Cheers,

Ian

Developer @ Dribbble