How to do the POST API call from babylon?

Questions
,
1

Hi,
I want to do the post api call from babylon, before that i want to save my details as a json format in my babylon script using array or list. Depends on the input i will add or delete those data.
Then the final data will be go from the babylon POST api.

Can you please tell me how to do this in babylon?

2

Hello !

Babylon is just Javascript. So you should be able to send Http requests in Babylon just the way you would in any plain JS script :

  • Gather data
  • Listen to an event
  • Send a request with xhttp with the stringified data

It could look something like this :

const myData = {
    name: "example",
    content: "this data has been set somehow in the Babylon app",
    target: undefined, // will be set later
}

// Here you fire the request, based on any Babylon event, for example a pointerDown (mySphere has been declared earlier in the app
mySphere.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickUpTrigger, function () {
     myData.target = mySphere
     xhttp.open("POST", "https://my.endpoint/custom", true);
     xhttp.setRequestHeader("Content-type", "application/json");
     xhttp.send(json.stringify(myData);
}));
3 Likes
3

Thanks for your reply.
i tried this part it works good, but unfortunately when i do the post request to my azure i am getting the CORS error.

myData = {

        transform: "sdas",
		scale:"dasdasd",
		rotation:"fsdvxcv",
		hotspotText:"asdawdasdasdasdasdasd",
		hotspotimage:"",
		hotspotMedia:"",
		createdBy:"Local"
    }
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "my-azure-api-lin", true);
     xhttp.setRequestHeader("Content-type", "application/json");
     xhttp.setRequestHeader("Access-Control-Allow-Origin","http://127.0.0.1:5500/");
     xhttp.setRequestHeader("Access-Control-Allow-Methods","GET, POST");
     xhttp.setRequestHeader("Access-Control-Allow-Headers","*");
     xhttp.setRequestHeader("Access-Control-Allow-Credentials","true");

     xhttp.send(JSON.stringify(myData));

When i use this function i am getting below error:
image

4

it seems you would need to allow CORS on your azure service :slight_smile:

2 Likes
5

So, CORS error is a notorious pain in the butt, when trying to developing http requests, although it has nothing to do with Babylon.js.

The error is raised because the endpoint you are targeting doesn’t know where the request is coming from and wether the source can be trusted. You have to set your trusted domains in your azure server.
I don’t know azure at all, but you should look into that. I found something here, for instance.

1 Like
6

CORS setup is done in azure, when i do the post call from postman it works fine, but when i do from babylon its throwing an error.
Please correct me if i am wrong.

7

SO you are saying i need to add these cors setup in my azure api management where i configured the API domains for the request?

8

It’s possible that Postman is a trusted domain by default for Azure, that may explain it. But localhost definitely needs a CORS settings on the server.

Here you have a video explaning how to set CORS in your Azure app.

image
image1690×906 74.3 KB

Try this out and tell me if it works. :slight_smile:

3 Likes
9

Sure let me try this :slight_smile:

10

Just tried it worked.
Not getting the CORS error now thank you :slight_smile:

1 Like
11

Glad to hear it fixed your problem ! Don’t forget to tag the question as solved for archiving. :wink: