Cancel
Showing results for 
Search instead for 
Did you mean: 

CORS error

Experimenter
Experimenter

When we are trying to make request from frontend Application(Angular) to backend application (Spring boot)

{they are seperate application in mindsphere and added backend application component in Frontend App}

and  passing X-XSRF-TOKEN  in request header and also  I added the "origin" header of the request to my backend application, to the response to the frontend application as "Access-Control-Allow-Origin" header:

 

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

 

 

Still getting Error 

Access to XMLHttpRequest at 'https://xxxx-springbackend-xxxx.eu1.mindsphere.io/test/getAllInfo' from origin 'https://xxxx-angularfontend-xxxx.eu1.mindsphere.io' 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.

3 REPLIES 3

Re: CORS error

Legend
Legend
If I remember correctly, there's issues with CORS requests inter-mindsphere apps, since the gateway does not return the appropriate headers. Maybe will be solved if you add the backend app url as one of the allowed sources in the frontend app CSP configuration (in the developer cockpit?). Search a bit the forums, I think this has been asked before.

Otherwise, your only option at the moment would be to move both components to be part of the same mindsphere application, under different paths (e.g. `/frontend' & '/backend'). This way both apps will be served from the same domain and no CORS issues should happen.

Re: CORS error

Experimenter
Experimenter

@dlouzan   thanks for your reply.

 

CORS issue had been solved by  handling CORS in backend and also we enhance our CSP configuration as

 

default-src 'self' eu1.mindsphere.io https://xxxx-springbootbackend-xxxx.eu1.mindsphere.io/;style-src * 'unsafe-inline';script-src 'self' 'unsafe-inline' eu1.mindsphere.io maps.googleapis.com;font-src * 'self';img-src * data:; connect-src 'self' *;

 

 

but when we are making GET request from frontend to backend application we are geting 302 that redirect to https://xxxx-springbootbackend-xxxx.eu1.mindsphere.io/login.   We also tried to pass x-xsrf-token but we didn't get any success response. 

 

Please help me out...

 

 

Re: CORS error

Siemens Creator Siemens Creator
Siemens Creator

Mindsphere would redirect to login page if the session is not established(or invalid). Front end need to send sessionID(set in browser cookie) and correct value for "x-xsrf-token".

Example of front-end call is below

https://developer.mindsphere.io/concepts/concept-authentication.html#calling-apis-from-frontend

 

Calling APIs from Frontend

Calling APIs from the frontend uses a different authentication method. Instead of sending the authorization header we reuse the sessionid that gets set as a cookie. Additionally, you need to send the following headers:

  • x-xsrf-token:{XSRF-TOKEN} which is automatically provided by the MindSphere Gateway as a cookie (e.g. x-xsrf-token:e4edcb6c-bd1c-46c1-863c-421235c522a3)

A simple example using the Fetch API is shown below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
let myXRSFToken = ...

fetch('/api/identitymanagement/v3/Users', {
  credentials: 'include',
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json",
    "x-xsrf-token": myXRSFToken
  }
})
...