CORS issue when calling external rest API from Application Builder

[saif.hasn (Saif Hassan)]

What product/components do you use and which version/fix level?

Application Builder

Are you using a free trial or a product with a customer license?

Customer License

What are trying to achieve? Please describe in detail.

We are creating a dashboard where I’m calling a AT&T external rest API, but I get the CORS error while fetching the API. The API is working in postman and also when I disable the browser security.

I’m currently using Application builder where I use this APIs in a custom widget.
I need help where I need to configure the headers or what step I need to take to fix this error.

Do you get any error messages? Please provide a full error message screenshot and log file.

[Darpankumar_Lalani (Darpan Lalani)]

Hi,

There are two possibilities here:

1. Target Server is looking for “Access-Control-Allow-Origin” header from client.
   You can fix this by passing “Access-Control-Allow-Origin” while calling API. For example

private readonly HTTP_HEADERS = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'  // Note: "*" is not recommended. pass actual origin based on error message. 
    })
  };

callAPIFun(id: string): Observable<any> {
    return this.http.get<any>(`${yourURL}`, this.HTTP_HEADERS);
  }

2. CORS policy is not enabled for the given API at Target Server.
   In this case, Target Server(where API hosted) is not allowing browser to consume API. To fix this, you need to enable CORS in Target Server for the cumulocity server(Origin).

You can find more details about CORS here: Cross-Origin Resource Sharing (CORS) - HTTP | MDN