"TypeError: Failed to fetch" for valid response

Hi all,

I have investigated this issue further. I will try to explain this issue as best I can. The root cause of my error is the fact that the response message contains two “access-control-allow-origin” headers. Please see this link for more info:

In order to reproduce this issue, I performed the following steps:

  1. perform http request in tyk portal. The portal first performs an “OPTIONS” http preflight request to verify that the server will accept the request. Next Tyk will perform the “GET” http request to request the data. Both requests contain the “origin” header with the ip-adres of the portal. I will come back to this later.
    Both requests are processed from the tyk catalogue api to the tyk api itself and forwarded to the backend microservice.
  2. Our backend microservice returns the following http headers in the response message:
  • Cache-Control: no-cache
  • Pragma: no-cache
  • Content-Type: application/json; charset=utf-8
  • Expires: -1
  • Server: Microsoft-IIS/10.0
  • Access-Control-Allow-Origin: *
  • Date: Wed, 15 Nov 2017 15:45:49 GMT
  • Content-Length: 2
    As you can see, the backend microservice returns the “Access-Control-Allow-Origin” header with the value “*”. This response is returned to the Tyk api. The tyk api’s returns the http response back to the requesting application with the following http headers:
  • Access-Control-Allow-Origin: https://10.31.12.38:3000
  • Access-Control-Allow-Origin: *
  • and a lot more common http headers
    The “Access-Control-Allow-Origin” is defined twice in the http header. My assumption is that the tyk api itself adds another “Access-Control-Allow-Origin” while it is already is the http response message.

The reason why directly call the api itself works correctly instead of via the catalogue, is because the origin header is not added to the request message. In order to reproduce this issue at your side, you should make sure that the backend application returns the header “Access-Control-Allow-Origin” with the value “*”. Are you able to reproduce this issue at your side?

I hope that this makes things clear to reproduce this issue at your side. Please see the picture below to understand how we have set up our tyk environment with our microservice backend.

Kind regards,

Tim