How to solve CORS issue in SAPUI5 application

[SachinSinghg]

Hi team,

I have created an sapui5 application using generator-easy-ui5 npm package. I have connected from my local machine VS-code editor to my SAP on-premise GUI system using middleware named @sap/ux-ui5-tooling. I have created my OData service and configured in my app through proper way in manifest.json and ui5.yaml. It was working fine OData and metadata of OData was also loading properly. Suddenly from last 1 week i am getting error in my console like : 

Access to XMLHttpRequest at '<URL>' (redirected from 'http://<username>:<password>@localhost:8080/sap/opu/odata/sap/ZPM_VPE_SRV/$metadata?sap-language=EN') from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

manifest.json code:

{

    "_version": "1.12.0",

    "sap.app": {

        "id": "com.cnc.test",

        "type": "application",

        "i18n": "i18n/i18n.properties",

        "title": "{{appTitle}}",

        "description": "{{appDescription}}",

        "applicationVersion": {

            "version": "${version}"

        },

        "dataSources":{

            "PMVPE":{

                "uri": "/sap/opu/odata/sap/ZPM_VPE_SRV/",

                "type": "OData",

                "settings": {

                    "odataVersion": "2.0"                

                }

            }

        }

    },

    "sap.ui": {

        "technology": "UI5",

        "icons": {},

        "deviceTypes": {

            "desktop": true,

            "tablet": true,

            "phone": true

        }

    },

    "sap.ui5": {

        "rootView": {

            "viewName": "com.cnc.test.view.App",

            "type": "XML",

            "async": true,

            "id": "app"

        },

        "dependencies": {

            "minUI5Version": "1.129.2",

            "libs": {

                "sap.ui.core": {},

                "sap.m": {}

            }

        },

        "handleValidation": true,

        "contentDensities": {

            "compact": true,

            "cozy": true

        },

        "models": {

            "":{

                "type":"sap.ui.model.odata.v2.ODataModel",

                "dataSource":"PMVPE",

                 "settings":{

                    "user":"<username>",

                    "password":"<password>",

                    "withCredentials":true

                }

            },

            "i18n": {

                "type": "sap.ui.model.resource.ResourceModel",

                "settings": {

                    "bundleName": "com.cnc.test.i18n.i18n"

                }

            }

        },

        "routing": {

            "config": {

                "routerClass": "sap.m.routing.Router",

                "viewType": "XML",

                "viewPath": "com.cnc.test.view",

                "controlId": "app",

                "controlAggregation": "pages",

                "async": true

            },

            "routes": [

                {

                    "pattern": "",

                    "name": "main",

                    "target": "main"

                }

            ],

            "targets": {

                "main": {

                    "viewId": "main",

                    "viewName": "Main"

                }

            }

        }

    }

}

ui5.yaml:

specVersion: "4.0"

metadata:

  name: com.cnc.test

type: application

framework:

  name: SAPUI5

  version: "1.129.2"

  libraries:

    - name: sap.m

    - name: sap.ui.core

    - name: themelib_sap_horizon

builder:

  resources:

    excludes:

      - "test/e2e/**"

server:

  customMiddleware:

    - name: fiori-tools-proxy

      afterMiddleware: compression

      configuration:

        ignoreCertError: true,

        backend:

        - path: /sap

          url: <actual URL goes here>

          client: "100"

    - name: "@ui5/middleware-code-coverage"

      afterMiddleware: compression

    - name: ui5-middleware-livereload

      afterMiddleware: compression

package.json

{

    "name": "com.cnc.test",

    "version": "1.0.0",

    "description": "UI5 Application: com.cnc.test",

    "author": "Sachin Singh",

    "license": "Apache-2.0",

    "scripts": {

        "clean": "rimraf dist coverage",

        "build": "ui5 build --clean-dest",

        "build:opt": "ui5 build self-contained --clean-dest --all",

        "start": "ui5 serve --port 8080 -o index.html",

        "start-cdn": "ui5 serve --port 8080 -o index-cdn.html",

        "start:dist": "npm start -- --config ui5-dist.yaml",

        "start:dist-cdn": "npm run start-cdn -- --config ui5-dist.yaml",

        "lint": "eslint webapp",

        "karma": "karma start",

        "karma-ci": "karma start karma-ci.conf.js",

        "karma-ci-cov": "karma start karma-ci-cov.conf.js",

        "test": "npm run lint && npm run karma-ci-cov",

        "wdi5": "wdio run ./webapp/test/e2e/\\wdio.conf.js"

    },

    "devDependencies": {

        "@sap/ux-ui5-tooling": "^1.12.3",

        "@ui5/cli": "^4.0.6",

        "@ui5/middleware-code-coverage": "^2.0.0",

        "@wdio/cli": "^9.2.2",

        "@wdio/local-runner": "^9.2.2",

        "@wdio/mocha-framework": "^8.40.6",

        "@wdio/spec-reporter": "^8.40.6",

        "eslint": "^9.9.1",

        "eslint-plugin-jsdoc": "^50.2.2",

        "globals": "^15.9.0",

        "karma": "^6.4.4",

        "karma-chrome-launcher": "^3.2.0",

        "karma-coverage": "^2.2.1",

        "karma-ui5": "^4.0.1",

        "rimraf": "^6.0.1",

        "ui5-middleware-livereload": "^3.0.3",

        "wdio-ui5-service": "^1.5.6"

    },

    "ui5": {

        "dependencies": [

            "@sap/ux-ui5-tooling"

        ]

    }

}

I am not getting why i am getting CORS error even after configuring proper middleware. my on premise VPN also is up and working perfectly fine.

[marcel_schork62]

Ignore

[marcel_schork62]

Ignore

[marcel_schork62]

Hey, for me it looks like that the basic authentication via proxy middelware is not working anymore and you get redirected to a SSO endpoint. Did you store your credentials in a .env file? Are these credentials still valid (password expired, user locked in backend)? BR Marcel

[SachinSinghg]

Hi Marcel, I am storing credentials only in manifest.json file and nowhere else. These credentials are working fine and valid perfectly. Strange thing is this app was working fine until last week, suddenly I am encountering this issue. 

[doe · Accepted solution]

Hello guys,

I find the same error and the project work correctly before. I assume that the root is the auth function change. Redirect to SSO login page. Need to add the auth property in the ui5.yaml like below. If it can directly pass authorization can work. 

server:

  customMiddleware:

    - name: fiori-tools-proxy

      afterMiddleware: compression

      configuration:

        ignoreCertError: true,

        backend:

        - path: /sap

          url: <actual URL goes here>

          client: "100"

          auth: '<user>:<pwd>'

Reference:

https://www.npmjs.com/package/@sap/ux-ui5-tooling#2-proxy

[SachinSinghg · Accepted solution]

Hi Doe, Thank you so much.I placed auth: '<user>:<pwd>' in yaml file now the app is able to get OData connection. But it was working well without auth parameter previously now how did u figured out that, auth parameter is need to be placed...?

[doe · Accepted solution]

The meaning of auth parameter is coming from the Reference(Official document of plugin). I think you can check your selected auth style in the setting. Before it can input the username and pwd in the browser dialog. But now it need to redirect to a new address to input right?

[junwu]

anyway it is very bad practice to store credential in your manifest.

I think for your case, it will prompt u to put user name/pwd, no need to store the credential.

[SachinSinghg]

No It's not asking me to enter credentials 

[junwu]

don't put your credential there, they will ask.

[SachinSinghg]

I removed credentials but still it isn't asking 😔

[junwu]

Do you mind sharing your project?

[SachinSinghg]

I can't share it because of the sensitive information but all the oData necessary code I pasted above there. The strange thing which I observed is the same project working well in my colleague laptops well but not for me. Just now in my analysis I found that, my oData request call taking me to an SSO authentication url which is not at all needed for OData requests. But for my colleagues it is not redirecting to SSO and asking for credentials. Even I doubted on my windows pc so I installed fresh Windows PC from Virtual Box still i face the same issue. Very strange

[SachinSinghg]

.

[doe]

Same error tip in browser. And my colleague can use but my project not. It work correctly before. Do you find the solution?