antonwilhelm
antonwilhelm

Reputation: 7503

Pinterest API: Access to XMLHttpRequest blocked by CORS policy

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?

Upvotes: 0

Views: 50

Answers (0)

Related Questions