Javascript Fetch API Cors : Doesen't pass access control check

Question

I am dealing with an external api. I want to post some data so i set a token in the headers to be able to access the api.

I am told that my test origin has been whitelisted http://127.0.0.1:8081/

However i get the following error.

Failed to load https://external-api.com/api/transactions/ad2d7a69-f723-4798-9fa5-a95a76d65324/document : Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

async submitDocument(transationId, token, base64) {

    const url = host + "/api/transactions/" + transationId + "/document"

    const body = {
        "image": base64,
    }

    let headers = new Headers();
    headers.set('Content-type', 'application/json');
    headers.set('token', token);

    const request = {
        method: 'POST',
        body: JSON.stringify(body),
        mode: 'cors',
        headers: headers,
        credentials: 'include'
    }

    const data = await fetch(url, request);
    const response = await data.json();

    return response;

}

This function call is being made browser side on the following page. http://127.0.0.1:8081/

Response from server

Request URL: https://externalapi.com/api/transactions/f400aaec-3fde-4458-a36e-fe03d550fc00/document
Request Method: OPTIONS
Status Code: 200 
Remote Address: 54.194.37.150:443
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: content-type, token
Access-Control-Allow-Methods: GET,POST,PUT,DELETE
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 0
Connection: keep-alive
Content-Length: 0
Date: Fri, 22 Jun 2018 15:29:27 GMT
Server: nginx
Vary: Origin
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Access-Control-Request-Headers: content-type,token
Access-Control-Request-Method: POST
Cache-Control: no-cache
Connection: keep-alive
Host: externalapi.com
Origin: http://127.0.0.1:8081
Pragma: no-cache
Referer: http://127.0.0.1:8081/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Answer 1

just read the error message carefully! Your domain must not be whitelistet with '*'.

It has to be ' http://127.0.0.1:8081 '. You have to ask external-api.com to recheck it.

Answer 2

In your request you have credentials set in a token header and the Origin of your request is:

Origin: http://127.0.0.1:8081

The request in this case will proceed only if the server answers with:

Access-Control-Allow-Origin: http://127.0.0.1:8081

Otherwise the request is blocked by the browser Check here for more details: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Examples_of_access_control_scenarios

In particular the section "Requests with credentials"