CAP + Angular = CORS block on CAP service

[#1]

Dear Experts,

I'm working on a big project having at the moment 9 applications.

I have 4 fiori elements apps and 3 fiori freestyle applications in the same project, together with the CAP service.

In parallel I have to develop an angular application for public access. I tried to have all together in the same project but it became impossible to me to get a working project able to be built and deployed to cloud foundry.

I have created the angular application in another project. It is a form which uses the CAP service to retrieve the information for value helps.

The oData calls are working fine on a local environment with proxy or using CORS anywhere chrome extension:

  getCountries():Observable<OData> {
    var response = this.http.get<OData>(this.baseUrl+"Countries?$format=json");
    return response;
  }

I'm using the information from this post to configure my deployed CAP service on the mta.yaml file:

#                            CAP
 # --------------------- SERVER MODULE ------------------------
 - name: cockpit-srv
 # ------------------------------------------------------------
   type: nodejs
   path: gen/srv
   requires:
    # Resources extracted from CAP configuration
    - name: cockpit-db
   provides:
    - name: srv-api      # required by consumers of CAP services (e.g. approuter)
      properties:
        srv-url: ${default-url}
   properties:
      CORS:
        - uriPattern: .
          allowedMethods:
            - GET
            - POST
          allowedOrigin:
            - host: '*'

Configuration is saved on the user-provided variables (manually changed after deployment):

[
{
"allowedMethods" : [ "GET", "POST" ],
"allowedOrigin" : [ {
"host" : "*",
"protocol": "https"
} ],
"uriPattern" : "."
} 
]

But when I try to access from the angular application I get CORS error:

So it seems the server is not providing the header: Access-Control-Allow-Origin: *

I have not been able to find any reference on the Capire documentation about CORS so I'm not sure if something else is needed.

Thank you in advance,

Kind regards,

[Yogananda]

Hi @jjgersol

You can find it in this blog How to fix cors

[JuanjoGersol]

Hi Yogananda, I went to that article, I understand the only thing I have to do is to return the correct header to avoid the browser to produce the CORS error, but in the scope of a CAP service I have no clue how to implement it.

I'm checking now if in the service implementation I'm able to append the header:

srv.after('READ','Countries', async (regs, req) => {
        //Alter headers here
    })<br>

But I'm not sure if that is even possible.

Thank you very much!

[Vlad]

Hi jjgersol,

for development purposes I use the dirty trick:

this.after("*", async (each, req) => {
    if (req.res) {
        req.res.set("Access-Control-Allow-Origin", "*");
    }
});

Please tell nobody 🙂 It worked well for me:

[Vlad]

Well... my previous comment was a bit wrong (I will keep it for historical reasons), because people from CAP has decided to add a so-called request validator that doesn't allow preflight (OPTIONS) requests. However, from the skinny documentation I have identified that you can create a file srv/server.js, and intercept the bootstrapping process, where you can use the cors middleware for express.js.

p.s. if this works well for you, I appreciate your credits to me 🙂

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

cds.on('bootstrap', (app) => {
    console.debug("Use: cors middleware");
    app.use(cors());
})
module.exports = cds.server;