SAP CAP - Enable CORS Policy

[emorales]

Hello community, thanks for the help. I have a CAP service, which I consume from a React Native application using axios. I was able to bypass the CORS policy error thanks to this repository: https://github.com/Rob--W/cors-anywhere/

Allowing me to confirm that the data is being brought in correctly. The problem is that this is a temporary solution, the error I receive is the following:

I was searching for solutions on the forums and found the possibility of enabling CORS within the mta.yaml, which I did as follows:

_schema-version: 3.3.0
ID: BTP6S
version: 1.0.0
description: "A simple CAP project."
parameters:
  enable-parallel-deployments: true
build-parameters:
  before-all:
    - builder: custom
      commands:
        - npm ci
        - npx cds build --production
modules:
  - name: BTP6S-srv
    type: nodejs
    path: gen/srv
    parameters:
      buildpack: nodejs_buildpack
      memory: 256M
      readiness-health-check-type: http
      readiness-health-check-http-endpoint: /health
    build-parameters:
      builder: npm
    provides:
      - name: srv-api # required by consumers of CAP services (e.g. approuter)
        properties:
          srv-url: ${default-url}
    requires:
      - name: BTP6S-db
      - name: BTP6S-auth
    properties:
      CORS:
        - uriPattern: .
          allowedMethods:
          - GET
          - POST
          - PUT
          - DELETE
          allowedOrigin:
          - host: '*'

  - name: BTP6S-db-deployer
    type: hdb
    path: gen/db
    parameters:
      buildpack: nodejs_buildpack
      memory: 256M
    requires:
      - name: BTP6S-db

  - name: BTP6S
    type: approuter.nodejs
    path: app/router
    parameters:
      keep-existing-routes: true
      disk-quota: 256M
      memory: 256M
    build-parameters:
      ignore: ["default-env.json", ".env"]
    requires:
      - name: srv-api
        group: destinations
        properties:
          name: srv-api # must be used in xs-app.json as well
          url: ~{srv-url}
          forwardAuthToken: true
      - name: BTP6S-auth

resources:
  - name: BTP6S-db
    type: com.sap.xs.hdi-container
    parameters:
      config:
        schema: BTP6S
      service: hana
      service-plan: hdi-shared
      
  - name: BTP6S-auth
    type: org.cloudfoundry.managed-service
    parameters:
      service: xsuaa
      service-plan: application
      path: ./xs-security.json
      config:
        xsappname: BTP6S
        tenant-mode: dedicated

I added "properties CORS" inside BTP6S-srv module:

properties:
      CORS:
        - uriPattern: .
          allowedMethods:
          - GET
          - POST
          - PUT
          - DELETE
          allowedOrigin:
          - host: '*'

I look at the "User-Provided Variables" and I can see that they have been added, but I still get the same error.

I read that it may need to be added to the approuter, which I also tried and it didn't work. However, I can't consume the approuter URL from my app because it redirects me to the login and it doesn't work for me. I need to go directly against my backend service.

[yogananda · Accepted solution]

hi @emorales 

npm i cors

Just install the npm package of cors and in srv folder - add the server.js

"use strict";

const cds = require("@sap/cds");
const cors = require("cors");

cds.on("bootstrap", app => app.use(cors()));

module.exports = cds.server;

[emorales · Accepted solution]

Hi ! Thanks for your help. I have a question for you, my CAP service uses "db/entities.cds" and "srv/entities_srv.cds". Should I create an "entities_srv.js" and add what you told me there? Or just create a "server.js" and add it in there.

[emorales · Accepted solution]

It worked! Thank you very much. Could I ask you a question privately? If that's okay with you. Thank you.