0

Trying to access the pinterest API in my Next.js / React app, but it won't work:

 const redirectUrl = 'http://localhost:3000/pinterest';
    const clientId = '1234';
    const clientSecret = 'XXXXXXXXXXX';

    let url = 'https://api.pinterest.com/v5/oauth/token';
    let body = {
        'code': code,
        'grant_type': 'authorization_code',
        'redirect_uri': redirectUrl
    };

    let accessTokenRequestBody = Object.keys(body)
        .map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(body[k])}`)
        .join('&');


    // console.log(`RequestBody=${JSON.stringify(accessTokenRequestBody, null, 2)}`);
    // console.log(accessTokenRequestBody);

    const clientIdAndSecretBase64 = Buffer.from(`${clientId}:${clientSecret}`).toString('base64');

    try {

        let response = await axios.post(url, accessTokenRequestBody, {
            "headers": {
                'Content-Type': 'application/x-www-form-urlencoded', //; charset=UTF-8
                'Authorization': `Basic ${clientIdAndSecretBase64}`
            }
        })

        console.log(response)
    } catch (e) {
        console.log("error")
        console.log(e?.reponse?.data)
    }

The error I get is:

Access to XMLHttpRequest at 'https://api.pinterest.com/v5/oauth/token' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I don't fully understand though, as I have localhost:3000 and localhost:3000/pinterest in my pinterest apps whitelist.

What else could be the culprit here?

antonwilhelm
  • 5,768
  • 4
  • 19
  • 45
  • 2
    oauth is typically a post to a new window and they load the url they give. It is not an Ajax post call. – epascarello Jan 09 '23 at 21:54
  • The code above is past having received the initial `code` and then being redirected to my own app (which all works). From there, i request the access token via a http `POST` request, using the `code` that I got from pinterest. – antonwilhelm Jan 09 '23 at 21:55
  • You can use nextjs api to fetch the Pinterest api instead of using the fetch method on the browser – eyadevv Jan 09 '23 at 21:43
  • Does this answer your question? [Access to fetch at https://accounts.google.com/o/oauth2/v2/auth has been blocked by CORS](https://stackoverflow.com/questions/72382892/access-to-fetch-at-https-accounts-google-com-o-oauth2-v2-auth-has-been-blocked) It's the same for Pinterest. – Heiko Theißen Jan 10 '23 at 14:15
  • @HeikoTheißen hey, i don't think that's true here. I have already redirected the user and gotten the code back from pinterest. So I am already past that step. After having gotten back the code from pinterest, the access token can be requested via fetch etc. See here: https://developers.pinterest.com/docs/getting-started/authentication/ – antonwilhelm Jan 17 '23 at 17:51
  • The [access token](https://openid.net/specs/openid-connect-core-1_0.html#TokenRequest) must be fetched by your _server_, not with a _fetch_ by the browser. – Heiko Theißen Jan 18 '23 at 06:39
  • Thank you so much, I must have misunderstood. Working now, really saved me so much pain. – antonwilhelm Jan 18 '23 at 09:40

0 Answers0