CAP + Angular = CORS block on CAP service

[JuanjoGersol]

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,

[klaus_kopecz · Accepted solution]

Hi Juanjo,

As shown in the post you are referring to, the CORS-configuration in mta.yaml must be part of the approuter module in mta.yaml. CAP (configured via the srv-module) does not know about CORS.

Regards, KK

[JuanjoGersol · Accepted solution]

Hi Klaus,

Thank you for pointing that out! I have been learning all these technologies in the last weeks and it's easy to be lost in small details.

I will try and let you know.

In any case I'm also trying to get working the combined (fiori + angular + cap) project.

Kind regards,

[klaus_kopecz · Accepted solution]

Great. Would be perfect if you can then share your results/experiences here ...

[JuanjoGersol · Accepted solution]

Dear Klaus,

Thank you very much! I have just reuploaded my whole project, and CORS is granted if the CAP service is exposed through the app router.

For newbies this is really important, as we have the CAP service URL that you can access from everywhere and that provides you with nice oData service, so your first attemp is to use that URL.

I didn't realize of that until I integrate the external app, because for basic projects in which all coding is provided by the generators you don't stop to think how everything works.

Kind regards!

[klaus_kopecz · Accepted solution]

Hi Juanjo,

Approuter is an important component of a complete application in the Cloud Foundry environment of SAP Cloud Platform. It is the frontend server playing various roles which are nicely described in this blog. Authentication is the most obvious function of the approuter.

KK

[gregorw · Accepted solution]

Great that you've got it working. Have you updated also the your example repository?

[Cristian · Accepted solution]

jjgersol klaus.kopecz

Hope you are doing well.

I am facing exactly the same issue. We have a React app that is getting failed whilst consuming the CAP based ODATA service due to a CORS issue.

As mentioned by klaus.kopecz , we added the CORS properties in the router module but still facing the same issue.

 # --------------------- APP ROUTER MODULE ------------------------
 - name: integration-suite-tools-router
 # ----------------------------------------------------------------
 type: approuter.nodejs
 path: app-router
 parameters:
 disk-quota: 256M
 memory: 256M
 requires:
 - name: integration-suite-tools-uaa
 - name: srv-api
 group: destinations
 properties:
 name: srv-api
 url: ~{srv-url}
 forwardAuthToken: true
 properties: 
 CORS:
 - uriPattern: .
 allowedMethods:
 - GET
 - POST
 allowedOrigin:
 - host: '*'

In the app router app, I can see the user provided variable created CORS successfully created as follows:

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

Any idea about what can be wrong?

Many thanks in advance.

C.