Can't Send a form to a server(POST) due to CORS error in a WEBGL build

Question

At the beginning i am not fully understanding http and web request so correct me if i am wrong. I am currently working on a game and it will be hosted on a server as a webgl build at the very beginning of the game the player sends some information to an API. The API has an ip whiteList ( i guess it is set via CORS ). but when i send a request i get a response code = 0 and i cannot connect to the server. Although my host domain is added to the whitelist.

 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://domain.com

my questions are. - when i send the request in an webgl build what is the ip and the host that sends that request? is it the server that hosts the webgl or the device that runs it(browser based) ? - If so, how to establish a connection and fix this problem?

Thanks in avance.

Answer 1

Best Answer

Answer by Bunny83 · May 19, 2020 at 11:13 AM

Well you haven't said where your WebGL content is hosted loaded from. The same origin policy is not about IPs, it's about domains. If you host your content on a certain server, say http://myserver.com/myWebGl.html then the content that is loaded in the browser is only allowed to access other resources on the same domain. So whatever API you want to access has to be on the myserver.com domain. If your API is located on another server / domain, that other server has to implement CORS and specifically allow access from other domains. Either a wildcard, allowing any other domain to access your API, or you restrict it do your own domain.

However that is usually not an issue since in most cases you would host your webgl content on the same server anyways. If you really host your actual game somewhere else, it depends on the server where you API is located. If it's an apache server, have a look over here. Note that many free hosters do not allow direct access to the server config. They often have policies that you are not allowed to use their service as a pure backend and might even have anti bot measures in place which makes those hosters pretty useless for such cases.

Note that if you "test" your webgl build locally, so you just open the html file from your HDD your server has to have CORS setup. Many browsers are actually even stricter with content loaded from the clients HD. For example relative paths that go one level up are not allowed. Otherwise a website loaded locally would have access to your whole HDD

I would generally recommend when you want to test your build, upload it to your actual server and test it on the server. I run an apache server on my raspberry pi. I also have a samba server installed so I have direct disc access to my "webspace" folder on my rpi. So I can simply copy the content directly onto my server. If you have an externally hosted server you usually have FTP access to your webspace.

Add comment · Show 3 · Share

AhmedBookra · May 20, 2020 at 11:03 AM 0

Share

Thanks for helping. the first part of your reply is the case. And i am sorry for not mentioning that the api is on another server. i am making a game for a client, he will host it on a server but the game has to send some information to another server through an api platform service (Any point platform by $$anonymous$$ulesoft) https://www.mulesoft.com/platform/enterprise-integration the documentation has a mocking service and every thing is working great. Accessing the actual api requires access credentials and i must provide them with the system ip to whitelist it ( which is the game sever ip). Thus when i POST through the actual api the connection is not allowed although i provided them with the server IP.

what is the ip when the webgl build send a webrequest to another server ( is it my browser or the server hosts the game) ?

Do i have to build a web application to act like a bridge or something? I really don't know

But thanks again for you generous reply

Bunny83 AhmedBookra · May 20, 2020 at 11:20 AM 0

Share

So you setup CORS on that API server correctly? I have never used that service. However it looks like you can either provide a list of allowed cross domain origins or check the "public resource" check box in which case anyone on the net can use your API. Keep in $$anonymous$$d that CORS is not a serverside protection but a client side protection. The browser executing your WebGL content refuses to access anything that doesn't belong to your own domain unless that other domain implements CORS and specifically allows this access. So you won't have any issues in a standalone build. However when running in a browser you have to implement CORS properly.

The easiest solution is to just tick that public resource check box. Though keep in $$anonymous$$d that even you have credentials to access that API, everyone running your game can spy on those credentials. That's even easier in a browser than it is in a standalone application. Though you shouldn't worry too much about misuse because there's nothing you can do to actually prevent misuse unless you require every API call to have a logged in user account. That still doesn't prevent someone from messing around with the API but you can actually tell which user it was ^^.

Note that if the API that is provided by that provider is meant as a backend to backend API which is restricted to your game server, you can not preform any API call directly from your WebGL content. In such a case your game has to talk to your game server and a serverside script on your game server would talk to the server that hosts that API. If you want the actual WebGL client to directly talk to your API, implementing a whitelist with your server IP wouldn't make any sense ^^.

AhmedBookra Bunny83 · May 20, 2020 at 11:39 AM 0

Share

Thanks. That is really what i needed to understand. Your reply helped me a lot, i appreciate it.

Can't Send a form to a server(POST) due to CORS error in a WEBGL build

1 Reply

Your answer

Follow this Question

Related Questions