IBM Watson Conversation API: “Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response”

Question

I created a React-Native app that connected to the Watson REST APIs. Using the fetch library that is part of the ReactNative, everything was working well for getting the Workspaces list, like this:

    const myAuth = new Buffer(USR+':'+PWD).toString('base64');
    const myInit = {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Origin': '',
            'Authorization': 'Basic ' + myAuth,
        }
    };

    return fetch(URL, myInit)
        .then((response) => response.json())
        .then((responseJson) => { ... }

I am now moving to React (rather than ReactNative) and the whatwg-fetch library. The same code does not work. First I got the error that:

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Then reading the tens of threads about these type of issues it just became black magic. Adding headers for Access-Control-Allow-Methods, Access-Control-Allow-Headers, and the such. Nothing really worked so far. Eventually the problem became:

Request header field access-control-allow-headers is not allowed by Access-Control-Allow-Headers in preflight response.

Can someone point me please to an example or code that works please?

==============

UPDATES ...

Thank you @sideshowbarker and @FakeRainBrigand. I guess then a server side is a must for the browser client app.

Answer 1

The browser is refusing to send your request because the server you're sending the request to hasn't enabled CORS, at least not with those headers.

The only solution without modifying the server you're targeting is to write your own server that makes the request on behalf of the client.