Hi,
I have setup CORS for on of my API
and we are writing code in the code in the Javascript. But unfortunately it is not working
Below is the Javascript for the request
response.setHeader(“Access-Control-Allow-Origin”, “*”);
response.setHeader(“Access-Control-Allow-Methods”, “POST, GET, DELETE”);
response.setHeader(“Access-Control-Max-Age”, “3600”);
response.setHeader(“Access-Control-Allow-Headers”, “Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Client-Offset”);
By “javascript” do you mean your Angular App or your API?
Are you trying to get your underlying API support CORS or do you want Tyk to handle it?
Ideally I want tyk to support all my CORS request.
But only thing I saw was CORS settings in the API composer. Is there anything else I’m missing ?
Also, I use tyk cloud.
Javascript is Angular webapp.
This is the example API
http://thethingscloud.cloud.tyk.io/cumulative/
Authorization: 56999a15c962eb0001000019d1cf7a4c3cb840cb581a4028509ab52e
How do I make a request to this API and get response in Angularjs ?
As said earlier, below is the CORS setting for this API.
You shouldn’t need to set headers in the JS app, the browser will do that for you in pre-flight.
Access-Control-Allow-Credentials:true
Which isn’t in your screenshot, so I’m assuming that your upstream NodeJS app (X-Powered-By:Express) is actually trying to add CORS headers already.
This is backed up by seeing what happens when a POST is made to the API, I get two Access-Control-Allow-Origin headers back instead of one. Usually, when this happens, a JS client / browser will bork, since they expect a single header. The fact there are two responses implies that both Tyk Gateway AND the underlying API are handling CORS:
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:chrome-extension://fdmmgilgnpjigdojojpjoooidkmcomcm
Access-Control-Allow-Origin:chrome-extension://fdmmgilgnpjigdojojpjoooidkmcomcm
My suggestion would be to deselect all options in the CORS handler, and just tick “Allow OPTIONS pass-through”, this will basically allow CORS pre-flights to go through Tyk without checking and let ExpressJS handle them.
If you want to tyk to handle it, then you’ll need to have the underlying API not handle CORS.
Hope that makes sense 
M.
Hey, this example is our working CORS settings on other API in this case
response.setHeader(“Access-Control-Allow-Origin”, “*”);
response.setHeader(“Access-Control-Allow-Methods”, “POST, GET, DELETE”);
response.setHeader(“Access-Control-Max-Age”, “3600”);
response.setHeader(“Access-Control-Allow-Headers”, “Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Client-Offset”);
But we try this options in tyk CORS and these options is not working
Error is
XMLHttpRequest cannot load http://thethingscloud.cloud.tyk.io/cumulative/. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://xxx.xxx.xxx.xxx’ is therefore not allowed access. The response had HTTP status code 400.
Cos app is hosted on xxx.xxx.xxx.xxx and Origin when Browser send request is set as xxx.xxx.xxx.xxx
What correct settings of tyc CORS should be in this case?
Does your underlying API handle CORS at all?
We want to make reqest from some ‘origin’ of our web app. It is made on AngularJS. We want this requset pass tyc io as proxy and pass to our backend API after this and get a responce. What CORRECT settings of CORS on tyc io should to be. Cos now we have an error
XMLHttpRequest cannot load http://thethingscloud.cloud.tyk.io/cumulative/. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://xxx.xxx.xxx.xxx’ is therefore not allowed access. The response had HTTP status code 400.
Yes, I know what CORS is, thanks.
I just tried access ing your APi and it’s not proxying so testing or fixing isn;t possible until there’s a working base.
Can you re-activate the proxy so that I can use a test key to diagnose?
we started it up
u can check now
Ok, so I cloned your API Definition, and got it to work just fine with Angular, here’s the plunker, as you can see all I do is add an Auth header with a valid key (I nabbed your API definition and cloned it so that I could experiment, will delete after confirmed you’re up and running).
In Tyk:
What has happened: