Cancel
Showing results for 
Search instead for 
Did you mean: 

Call backend api hosted on MindSphere from UI app hosted on MindSphare - CORS Issues

Siemens Valued Contributor Siemens Valued Contributor
Siemens Valued Contributor

Both the fronend application & backend application are developed on MindSphere, The backend application is  java spring boot & I have disabled the CORS to the backend application so that I should be able to call the apis without CORS issue.

With the screen shot you can see, I'm trying to call the backed api's from the front end application where I'm receeving the error message of Access-Control-Allow-Origin with status code 403.

Looks like the communication from MindSphere frontend intance to backedn instance is not happening.

 

Please suggest the solution.

30 REPLIES

Re: Call backend api hosted on MindSphere from UI app hosted on MindSphare - CORS Issues

Siemens Valued Contributor Siemens Valued Contributor
Siemens Valued Contributor

I am trying to do something similar in a POST request to my apps backend, but getting a different error -

 

"{"readyState":4,"responseText":"[{\"logref\":\"b73cd79a3d814853b39790e743b1c9a7\",\"message\":\"MSG exception: Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-XSRF-TOKEN'.\",\"stackTrace\":\"\"}]","responseJSON":[{"logref":"b73cd79a3d814853b39790e743b1c9a7","message":"MSG exception: Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-XSRF-TOKEN'.","stackTrace":""}],"status":403,"statusText":"error"}"

 

Any help appreciated. 

Re: Call backend api hosted on MindSphere from UI app hosted on MindSphare - CORS Issues

Siemens Valued Contributor Siemens Valued Contributor
Siemens Valued Contributor

If your application front end & backend is in the same application then as describe in MindSphere documentation you can call the api's by passing x-xsrf-token, If you do so it will start working for you.

 

You may use below code to get the token.

 

var myXRSFToken;
var nameEQ = 'XSRF-TOKEN' + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) myXRSFToken = c.substring(nameEQ.length, c.length);

console.log("myXRSFToken = " + myXRSFToken);

 

Also do not reply to this thread as I don't want to divert the direction of my question Smiley Happy you can write me to here dinesh.bhavsar@siemens.com

 

let myXRSFToken = ...

fetch('/api/im/v3/Users', {
  credentials: 'include',
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json",
    "x-xsrf-token": myXRSFToken,
    "origin": `${window.location.protocol}//${window.location.host}`
  }
})
...

 

 

Re: Call backend api hosted on MindSphere from UI app hosted on MindSphare - CORS Issues

Siemens Genius Siemens Genius
Siemens Genius

Hi @Dineshb,

 

thanks for your question. If I have understood your problem correctly, you basically want to make cross-application calls. Those kind of calls are currently not supported, by we are working on API-type applications.

Re: Call backend api hosted on MindSphere from UI app hosted on MindSphare - CORS Issues

Siemens Valued Contributor Siemens Valued Contributor
Siemens Valued Contributor

When this so called API-type applications will be supported ?

And what about if my local application wants to call a service deployed on the MindSphere ? 

It's very difficult for web application developer to deploy the application everytime to MS & test the api calls.

 

The modern applications are all microservice based.

Re: Call backend api hosted on MindSphere from UI app hosted on MindSphare - CORS Issues

Siemens Genius Siemens Genius
Siemens Genius

The current plan is to support this in the next couple of weeks. If you want to develop locally, you can issue a service credential pair that allows you to call the APIs. During development you can then use the token via the service credentials and when deployed from the user (https://developer.mindsphere.io/howto/howto-selfhosted/index.html#step-1-create-service-credentials).

Re: Call backend api hosted on MindSphere from UI app hosted on MindSphare - CORS Issues

Siemens Valued Contributor Siemens Valued Contributor
Siemens Valued Contributor

Service credentials are accociated with perticular account, I would like to pass identity of another user pobably having diffrent autherization rights, but anyways we can even create another technical user & deal with it.

The issue with this is we are able to access MS api's using service credentials but the custom api's deployed are not accessible.

 

To access my deployed api's I tried

  1. Passing service credentials as basic authentication 
  2. Obtained auth token from https://psdigdev.piam.eu1.mindsphere.io/oauth/token & pass it over to access the end point of my rest based application

In both the scenatio I'm not able to access my api, while the MS api's are accessible. 

Refer the attachments.

 

Re: Call backend api hosted on MindSphere from UI app hosted on MindSphare - CORS Issues

Siemens Genius Siemens Genius
Siemens Genius

@Dineshb currently this is not possible to call your APIs from outside of MindSphere. We are working on a mechanism that allows you to issue service credentials (technical token) for calling those.

Re: Call backend api hosted on MindSphere from UI app hosted on MindSphare - CORS Issues

Siemens Valued Contributor Siemens Valued Contributor
Siemens Valued Contributor

@MichaelE When can this be available ?

Re: Call backend api hosted on MindSphere from UI app hosted on MindSphare - CORS Issues

Siemens Genius Siemens Genius
Siemens Genius

We are currently try to support this in the next 2 months if everything goes well.