React JS CORS-ORIGIN - Instagram Basic Display API

user_14580484 0
Viewed 139

I have problem with CORS: Access-Control-Allow-Origin when try to exchange the code for access token from Instagram API.

Instagram API documentation Step 5 : https://developers.facebook.com/docs/instagram-basic-display-api/getting-started#step-5--exchange-the-code-for-a-token

Body parametars:

const body = {
    'client_id': 'xxxxxxxxxxxxxx',
    'client_secret': 'xxxxxxxxxxxxxx',
    'grant_type': 'authorization_code',
    'redirect_uri': 'https://localhost:3000/',
    'code': instaCode
};

My request:

axios.post(`https://api.instagram.com/oauth/access_token`, qs.stringify(body), { 
     headers: {'content-type': 'application/x-www-form-urlencoded'} 
});

Тhis code worked 2 months ago.

instagram-api instagram-graph-api instagram reactjs cors
1 Answers

edit: you can try this axios post request to send form data first which seems better, below worked for me though

That won't work, you have to send the body in a form data.

I believe fetch API would work but that's available since node 17, if you're using earlier version this is what worked for me.

SOURCE https://www.section.io/engineering-education/integrating-instagram-basic-display-api/

const { post } = require("request");
const { promisify } = require("util");


const postAsync = promisify(post);

    const form = {
        client_id: NUMBER,
        client_secret: STRING,
        grant_type: "authorization_code",
        redirect_uri: STRING,
        code: req.body.code,
    };

    let { body, statusCode } = await postAsync({
        // let result = await postAsync({
        url: "https://api.instagram.com/oauth/access_token",
        form,
        headers: {
            "content-type": "multipart/form-data",
            host: "api.instagram.com",
        },
    });

npm i request and use that inside a try/catch of course

user_84141660
Related