OpenAPI Servlow - CORS error on accessing from Browsers

[former_member739609]

Hi All,

I'm using SAP Data Intelligence v3.1 and DI Modeler for the below scenario.

I'm hosting a web server via the OpenAPI Servlow operator with swagger documented service definitions, and I am trying to consume the same via a reactJS UI application. And when I am trying to make REST requests, the browser triggers a pre flight check and an OPTIONS request is made to the Servlow server and I'm returned a "NO CORS Error"

I am currently going around it by two ways,

1. Using a proxy such as cors-anywhere (for local requests) and accessing the APIs exposed via Servlow

2. Using a chrome window with web security disabled (for accessing the React application when its deployed to a cloud).

But since these two cannot be viable fixes when going to production, is there any way to properly handle cross origin requests when exposing web services via the DI Modeler and the Servlow operator?

[former_member739609]

Any replies would be helpful 🙂

[ravicondamoor]

From your ReactJS UI application add this Key: Value to the Header block of the REST API:

X-Requested-With: XMLHttpRequest

See Postman screenshot below...

[former_member759762]

Hi invenics, indu.khurana18,

I also face the same issue. I have build REST API on SAP Data Intelligence then try to request from SAC. Have try suggestion from marcel.oenning but still the same.

Did you found the solution to enable the CORS?

Thank you.

Regards,

[marcel_oenning]

The attached graph shows how to enable CORS support for endpoint /v1/echo of the OpenAPI server operator.

To import the example graph you need to:

1. Download graph.txt

2. Go to Pipeline Modeler -> Create a new graph and click on "JSON" View at the top right corner.

3. Now copy and paste the content of the graph.txt file into the Modeler JSON View of the new graph (replacing the original content)

4. Now switch back to "UI" view.

For your own graph the following things need to be done to enable CORS support:

- in the swagger specification define an OPTIONS request for your endpoint (example: /v1/echo)
- in the handler of the endpoint (e.g. /v1/echo) OPTIONS request, set the Access-Control-Allow-Origin, Access-Control-Allow-Methods and the Access-Control-Allow-Headers headers.
- in the handler of the endpoint (e.g. /v1/echo) POST request, set the Access-Control-Allow-Origin header.

graph.txt

graph.txt

[mfoeken]

Hi Marcel,

Where can I find the headers related to CORS in your example? I do see the options specified as part of the /v1/echo but specifics on how to add the headers.

Kind regards,

Martijn van Foeken | Interdobs

[marcel_oenning]

Check the coding of the Javascript operator in the graph. There the CORS headers are set.

[mfoeken]

Hi Marcel,

Thanks! I just noticed when digging a bit deeper. I thought it was in OpenAPI Servlow.

Kind regards,

Martijn van Foeken | Interdobs

[Former Member]

Hello Marcel,

Had the same issue, I tried what you've suggested and for me, it still causes an issue because the OPTIONS req. expects authentication (the bearer token) and of course we can't add any because the req. is automatically made by the browser and not through the client code. Please suggest.

Thank you