No 'Access-Control-Allow-Origin' header when sending requests to tgcloud

morsagmon · February 15, 2022, 10:17pm

Hello all.
I am sending http requests to my tgcloud instance, from my local dev env:

https://simplify-pilot-a.i.tgcloud.io:9000/requesttoken?secret=nvg...ecvl&lifetime=1000000

I receive this error:
Access to XMLHttpRequest at 'https://simplify-pilot-a.i.tgcloud.io:9000/requesttoken?secret=nvg...ecvl&lifetime=1000000' from origin 'http://localhost:8100' 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’m using tgcloud v. 3.4.0
Please advise…
Thanks!
Mor

canbax · February 16, 2022, 8:24pm

This is a server configuration. Basically server says only allow my own clients. So you are an outsider for the server.

You can create a proxy server. I already did https://github.com/canbax/tiger-api You can use this

morsagmon · February 17, 2022, 5:08pm

Hi Yusuf, thank you for your reply and pointer!
My app is an Angular + Ionic mobile app. When using Angular’s HttpClient - I’m getting hit with the CORS issue. When using plain Java from a local server (http-server) - I’m getting through just fine (even though I’m still sending from localhost:9000!).

Maybe I’m missing something, but the tgcloud server is by definition a cloud service that should serve requests from any origin, any domain. CORS should be defined and open on the tgcloud server side. Am I missing something?

Anyway, I’d like to avoid another http server within my Angular app, if possible. Your code seems like a solid server-side, plain JS implementation.

Bruno · February 17, 2022, 5:53pm

Hey @morsagmon,

you can open GraphStudio Admin page, go to Management → Components → Nginx
There you can set key-values for Nginx.

Put Access-Control-Allow-Origin as name and ***** as value.

Best,
Bruno

morsagmon · February 17, 2022, 6:42pm

Hey Bruno, many thanks!
Have I entered it correctly? I’ve restarted the server after adding this value, but still denied on CORS with the same error. See here:

canbax · February 17, 2022, 7:09pm

Try giving field value your own client adress or simply ‘’. '’ means all.

By the way, your Java code is server-side. So it doesn’t give any error.

Lastly You can check https://github.com/canbax/davraz/ it uses https://github.com/canbax/tiger-api

Bruno · February 17, 2022, 7:13pm

Sorry, should be only * (one asterisk). Didn’t saw that formating was bad.
Saving and restarting nginx should be enough.

morsagmon · February 17, 2022, 7:30pm

One asterisk also not working yet.

morsagmon · February 17, 2022, 7:32pm

I can’t restrict to one client. This will be a mobile app many people will use from around the world. As Bruno indicated, asterisk usually means “all”, but it’s still not working for me…

Bruno · February 17, 2022, 7:43pm

Can you share a log of network analytics from developer tools of your browser?

morsagmon · February 17, 2022, 9:18pm

Sure. Here it is. It shows 200, but I am still getting the error and no payload coming back.

Here is the console log with the error:

Bruno · February 21, 2022, 9:14am

@morsagmon I just made a curl request to your server but cannot see the header being there:
curl -H "origin: localhost" -v "https://simplify-pilot-a.i.tgcloud.io:9000/echo"

Did you restarted the instance?

Bruno

morsagmon · February 21, 2022, 10:55am

Hi Bruno.
I just restarted it now (I thought it was enough to restart the NgInx server after changing the CORS param).
Can you please check now?
The app is still returning the CORS error, but I do get a response using your curl echo request.

Bruno · February 21, 2022, 12:02pm

Can you please check if there is an OPTION call before GET ?
I still see the same header when using curl. Will later start a cloud instance and test. Maybe it’s bug.

morsagmon · February 21, 2022, 12:22pm

The first request I’m sending is requesttoken. No OPTION call at all.
Awaiting your input.
Thanks!

Jon_Herke · February 21, 2022, 3:22pm

@morsagmon An alternative to requesting a token from the front-end (bypassing CORS) you can add this functionality to a middleware server. This walks you through the process step-by-step. Chapter 04 - Middleware - TigerGraph's Fullstack Course

Bruno · February 21, 2022, 3:38pm

He is already using mid tier (serverside Java). And there is no OPTIONS call.
@morsagmon Why are you not forcing your middleware to get the token?

morsagmon · February 21, 2022, 3:59pm

I’m not sure I understand this option.
I don’t really have a middleware (unless the Angular server is considered as such).
This is an Angular/Ionic app that should send requests to the tgcloud service.
Angular has a strong httpClient service that I’m using for other cloud services (including Google FireBase) without a problem. Why should tgcloud be any different?

Bruno · February 21, 2022, 4:20pm

I thought that you are using Java (as mentioned in your first post). For a plain JavaScript (2-tier) application, CORS is sending OPTIONS before GET/POST - this is a browser security feature.

Since TG Nginx proxy is not processing OPTIONS, you get the error message and the request for token generation fails.

Can you please change the request encoding for this call to 'Content-Type': 'application/x-www-form-urlencoded'

It may help in this case.

I asked my engineers to check the issue, 2-tier apps would all have the same issue.

Bruno

morsagmon · February 21, 2022, 4:57pm

Thanks Bruno.
I set the headers with the content-type you specified, no change.
(In the first message I mentioned that Java (should be JS actually) is working fine to emphasize it is only related to calls made from Angular. I tested it outside Angular just to verify I’m not doing anything wrong on my end. It is working OK outside of Angular here!).