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.

Answer 2

Remove whatever client-side code is setting the Access-Control-Allow-Headers request header.

The header is a response header CORS-enabled servers send. You don’t set it from the client side.

Based on the error messages cited in the question, it sound like the server may already be correctly configured to send the right Access-Control-* headers. (Otherwise you’d instead be getting an error saying there’s no Access-Control-Allow-Origin in the response.)

The only error identifiable from the information in the question at this point is just that problem of the request including an Access-Control-Allow-Headers request header that shouldn’t be there.