无法使用React.js提取方法连接到API

Question

I'm trying to connect to buffer's API ( https://buffer.com/developers/api/oauth ) via react.js using fetch(), but I'm getting a 400 error response.

This is running on my localhost but the site's accessible from the Internet.

Here's my code:

const queryString = require('query-string');
        const parsed = queryString.parse(window.location.search);

const buffer_data = {
                client_id: BUFFER_CLIENT_ID,
                client_secret: BUFFER_CLIENT_SECRET,
                redirect_uri: BUFFER_CALLBACK_URL,
                code: parsed.code,
                grant_type: 'authorization_code',
};

fetch(BUFFER_ACCESS_TOKEN_URL, {
                method: 'post',
                body: JSON.stringify(buffer_data),
              }).then( data => {
                console.log('data response ' + data);
                return data.json();
            }).then( response => {
                console.log(response);
});

And here's the response:

{"error":"invalid_request","error_description":"Invalid grant_type parameter or parameter missing"}

And the console prints this:

Failed to load https://api.bufferapp.com/1/oauth2/token.json : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://myserver.com ' is therefore not allowed access. The response had HTTP status code 400. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I've tried lots of things, like not serializing the data, trying sending many different headers, using a CORS chrome plugin, etc

Before coding this in react, I've successfully connected using PHP, but to do that I had to add an SSL certificate on my server.

I'm also open to use any library but haven't found one to do this job. Or any other fetching method, like axios?

Many thanks!

Answer 1

I don't know which browser you are using, but you might want to add Allow-Control-Allow-Origin

for your chrome browser (if you are using chrome). This is some issue that seems to occur when you are using localhost with chrome.

Also, i highly recommend using axios for fetching API's, it comes with some easy error logs that can help you pinning down the issue pretty fast.

Greetings!