CORS error when embedding SAP Analytics Cloud story in web page

[takasumi358]

Hello experts,

As shown in the tutorial below, I want to display SAP Analytics Cloud stories embedded in a web page.

Embed an SAP Analytics Cloud Story in a Simple Web App | Tutorials for SAP Developers

However, a problem occurs as follows. Could someone please tell me how to solve this?

Details

After logging in to SAP Analytics Cloud (entering the ID and password) as described in 3 of STEP 3 of the tutorial, I confirmed a timeout error when obtaining an access token. In this case, I ran it on a virtual machine remotely connected from my home PC.(The image below is the command prompt log when a timeout error occurs.)

Next, I tried it in the local environment of my home PC instead of the virtual machine.

As a result, the timeout error when obtaining an access token after logging in to SAP Analytics Cloud was resolved, but I confirmed that the SAC story was not displayed on the web page after a successful login.

When I press the "Display Story" button, no story is displayed.

At this time, when I checked the console of the browser (Chrome), the following error message was displayed.

Access to XMLHttpRequest at 'https://<TENANT>/sap/fpa/ui/tenants/<TENANT_ID>/bo/story/<STORY_ID>' from origin 'http://localhost:8081' 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.

After researching about this error message, I found that I need to add the 'Access-Control-Allow-Origin' header on the server side. However, SAC already allows client-side (local) IP addresses as Trusted Origin.

IP addresses shaded in blue are those of client-side PCs (my home PCs).

Best Regards,

Takasumi Iwahashi

[JamesRLongstaff]

Dear Takasumi,

Have you made any progress with this issue before I invest considerable time investigating it?

Based on your question I am assuming that you are using a Live Data Connection as you need CORS. I also have to assume that your story in SAC works and has no CORS related problems.

If both these points are true have you tried to display your embedded story when you are connected to your customer's network either by vpn or on site?

If you don't have a live data connection story running at the moment in a production environment that would indicate that the 'Access-Control-Allow-Origin' header you mention is not configured in the backend.

Which begs the question, what particular back-end are you connecting to? SAP HANA 1.0/2.0 or other?

The last of these mentions a fairly quick workaround that you might try to see if it resolves your particular issue. It involves going to the page chrome://flags, see image below, searching for the block on insecure private network requests and disabling it. If this and being connected to the network where the data is retrieved from by Live Connection doesn't work then try and answer some of my questions to help with defining better your problem.

There have been several notes published of late about this amongst them; 2887651, 2890576, 3205694.

The last of these mentions a fairly quick workaround that you might try to see if it resolves your particular issue. It involves going to the page chrome://flags, see image below, searching for the block on insecure private network requests and disabling it. If this and being connected to the network where the data is retrieved from by Live Connection doesn't work then try and answer some of my questions to help with defining better your problem.

chrome://flags/

Hope this helps!

Regards

James Longstaff

[takasumi358]

Dear James,

Thanks for the comment and the Introduction to KBAs.

>Have you made any progress with this issue before I invest considerable time investigating it?

Not resolved yet.

I contacted SAP and they told me that this tutorial is outdated and we should wait until they update it.

>Based on your question I am assuming that you are using a Live Data Connection as you need CORS.

>I also have to assume that your story in SAC works and has no CORS related problems.

I have only followed the tutorial below.

https://developers.sap.com/tutorials/sac-embed-story.html

So I'm using the story prepared by default in SAC. That story name is "Sample - Revenue Analysis".

If you also have your own SAC environment, you may have the same story.

I'm not using a Live Data Connection because I don't need to connect with an external table.

Also, I'm not connecting to any external systems like S/4 HANA.

>It involves going to the page chrome://flags, see image below,

searching for the block on insecure private network requests and disabling it.

It may not apply to my case, but I tried. The result was a CORS error as before.

Best Regards,

[arijit_das]

Did you try to use http://127.0.0.1:8081 instead of http://localhost:8081 in the browser?

[takasumi358]

Thank you for your reply.

Yes. I tried with http://127.0.0.1:8081. However, the result is an error.

I contacted SAP and they told me that this tutorial is outdated and I should wait until they update it.