Invalid API Token

Question

I am pretty new to CORS. I am building a React App which simply posts data to a backend API. According to the API documentation I have to send a BASIC Authentication Header along with the request which is exactly what I am doing. The request works just fine when I send it through POSTMAN. But when I make the same request from my APP it says Invalid API Key. Below is my code:

App.js:

import React from 'react';

class App extends React.Component{

    state = {
        data: 'data'
    };

    handleClick = async () =>{
        const res = await fetch('https://myapi.com/post',{
             method: 'POST', 
             body: JSON.stringify({tp:'0'}),
             mode: 'cors',
             headers: {
                 content-type:'application/x-www-form-urlencoded',
                 Authorization : 'Basic ' + new Buffer('username:password').toString(base64)
             }
        });
        const data = await res.json();
        this.setState({data});
    }

    render() {
        return(
             <div>
                 <p>{this.state.data}</p>
                 <button onClick={this.handleClick}>Post</button>
             </div>
        );
    }
}

I looked into the issue and found out that the headers are not being set when sending the request. When further digging into it I found out that the above request is not a simple request and hence the browser makes a preflight OPTIONS request to server. I do not know how the server is handling the requests but I think the server is not configured to handle the preflight OPTIONS. I might be wrong. I do not have any access to the server code. The same request through CORS Anywhere proxy and POSTMAN client is working fine but not while using the actual app. I used create-react-app to setup the boilerplate.

All I get is an Invalid API Token Error while sending request through the app.

Any help on how to get the headers through to the server would be appreciated.

Is the API developed by yourself or is it a third party API? — Stephan Schrijver, May 18 '19 at 15:28
You might want to wrap the headers in a Headers object: https://observablehq.com/@mbostock/fetch-with-basic-auth and https://stackoverflow.com/a/34815964/6511985 — Stephan Schrijver, May 18 '19 at 15:35
Interesting. The problem you assumed can be possible of course, that they indeed do not handle the OPTION preflight requist properly. But then they should have faced this problem in an earlier stage with other customers. At least, if they have more people consuming the API with a web interface. Or was it built for you? — Stephan Schrijver, May 18 '19 at 16:22

Stephan Schrijver · Answer 1 · 2019-05-18T16:12:33.910

According to another post, you might want to wrap the Authorization header in a Headers-object. I guess you should not really pay attention to the OPTIONS-request, that request shouldn't contain any user credentials and the server shouldn't really look for any credentials on a OPTIONS-request, more info.

What happens if you make the following changes (don't forget to npm install base-64).

import React from 'react';
const base64 = require('base-64');

class App extends React.Component{

    state = {
        data: 'data'
    };

    handleClick = async () => {
        const headers = new Headers();
        headers.append("Authorization", "Basic " + base64.encode("user:password"));

        const res = await fetch('https://myapi.com/post',{
             method: 'POST', 
             body: JSON.stringify({tp:'0'}),
             mode: 'cors',
             headers: headers
        });
        const data = await res.json();
        this.setState({data});
    }

    render() {
        return(
             <div>
                 <p>{this.state.data}</p>
                 <button onClick={this.handleClick}>Post</button>
             </div>
        );
    }
}

I tried making a Headers Object. Same error. I looked into the request headers in the chrome network tab, it is empty. No headers are passed along with the request. — A Rogue Otaku, May 18 '19 at 16:13

Invalid API Token

1 Answers1