CORS issue - Upstream API works from Postman but not from React app
We are having a CORS issue where it works from Postman tool, but not from our web app. We are using Tyk Open Source for our testing.
We tried various combinations as shown below, but we are always getting exception.
The backend API is already configured with CORS so that it can send appropriate headers in the response.
First Combination:
“CORS”: {
“enable”: false,
“allowed_origins”: ,
“allowed_methods”: ,
“allowed_headers”: ,
“exposed_headers”: ,
“allow_credentials”: false,
“max_age”: 0,
“options_passthrough”: true,
“debug”: false
}
Second Combination:
“CORS”: {
“enable”: true,
“allowed_origins”: [“http://localhost.*”],
“allowed_methods”: [“GET”,“PUT”,“POST”,“DELETE”,“HEAD”,“OPTIONS”,“PATCH”],
“allowed_headers”: [“Content-Type”,“Authorization”],
“exposed_headers”: ,
“allow_credentials”: true,
“max_age”: 24,
“options_passthrough”: true,
“debug”: false
}
Third Combination:
“CORS”: {
“enable”: true,
“allowed_origins”: [“http://localhost.*”],
“allowed_methods”: [“GET”,“POST”, “PUT”,“PATCH”,“DELETE”],
“allowed_headers”: [“Origin”, “Accept”, “Content-Type”, “X-Auth-Key”,“X-Token-Key”,“Authorization”,“X-Requested-With”,“Access-Control-Allow-Origin”],
“exposed_headers”: null,
“allow_credentials”: false,
“max_age”: 24,
“options_passthrough”: false,
“debug”: false
}
Exception:
Access to fetch at ‘Tyk Gateway URL’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
Note:
Directly accessing the upstream API without Tyk works as expected from the react app.
We are passing Bearer token (Authorization header) in the request so that API can authorize the request
What is the cause and what is resolution? Please advise.
Thanks,
Anand