Cors policy error

Support Administration and Operation
,
1

Hi,
I am using self managed version of tyk.
I am using tyk to bypass the url. In tyk I have created the api using Open Id authorization.
The api is working perfectly when I call it from postman.

I tried to call it from my angular application- locally from http://localhost:4200/.

But it is showing as ‘Access to XMLHttpRequest at ‘http://:8080/api/1’ from origin ‘http://localhost:4200’ 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.’

I tried to resolve by only selecting ‘Options pass through’ in advanced options- but the issue was not solved.

Also I tried by enabling CORS, Allowed Origin as * , selected all methods in the dropdown as Allowed methods,* as Allowed headers - still the issue not resolved.

My back end application supports all headers and origin.

Is there any issue while connecting local host to tyk apis?

2

Hi

Could you share the response headers you received when making the options call?

Just to confirm, did you strip out the domain name due to sensitivity?

Additionally, confirm that your listen path is correct. If it has a trailing “/” the you would need to put that in your request in Angular

image
image1402×213 17.2 KB

3

Hi,
attaching option response headers by hiding the exact domain
Access-Control-Allow-Headers: authorization,cache-control,expires,language,pragma,applicationid,pageid,timezone-offset,x-client-token,x-token
Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: *
Date: Mon, 19 Jul 2021 13:15:15 GMT
Request-Context: appId=
Server: Kestrel
Set-Cookie: ARRAffinity=xxx;Path=/;HttpOnly;Secure;Domain=commonapi-xyz-abc.xzx.in
Set-Cookie: ARRAffinitySameSite=xxx;Path=/;HttpOnly;SameSite=None;Secure;Domain=commonapi-xyz-abc.xzx.in
X-Ratelimit-Limit: 0
X-Ratelimit-Remaining: 0
X-Ratelimit-Reset: 0

Used listen path is - /common/

4

Based on the header response, the ‘Access-Control-Allow-Origin’ header is present on the gateway.

I would assume the call was made directly to the gateway (through something like CURL) and not through Angular via the browser. So it may be worth seeing the header requests and responses from Angular’s point of view.

Also, can you create a Http Bin API definition and run a simple test to /get path in the gateway through Angular. I am interested in knowing the result.