UI5 TDG Demo - CORS Error - Alternative Solution

[Former Member]

Problem:

You are working on TDG Demo provided in UI5 developer guide. Your application fails to load data from sample OData service due to web security / CORS Cross-origin resource sharing (CORS).

As per sap help documentation , you should over come this issue by using simple proxy servlet with additional context param as mentioned at this link. But, sometime this may not work due to some unknown reasons.

Below is the alternative solution to overcome this issue.

Errors:

XMLHttpRequest cannot load http://domain2.example. Origin http://domain1.example is not allowed by Access-Control-Allow-Origin.

HTTP Status 500 - Server redirected too many times (20)

Solution: Use CORSPROXY

Steps

1. Install CORSPROXY by giving below command at command or $ prompt

npm install -g corsproxy

2. Start CORSPROXY by giving below command at command prompt

$ corsproxy

3. This starts corsproxy in it's default port 9292. You can launch it by http://localhost:9292

4. Now, you can use your ODATA service url by appending it to corsproxy url

     ie.

            http://services.odata.org/V2/(S(sapuidemotdg))/OData/OData.svc  

     will be called by below url

           http://localhost:9292/services.odata.org/V2/(S(sapuidemotdg))/OData/OData.svc

      You can test it by launching directly.

5. Now use this new url in component.js. Run UI5 TDG Demo app and you should see list of products from odata service.

References:

https://www.npmjs.com/package/corsproxy