How to enable CORS in AngularJs?

Question

I am trying to consume a ZOOM API POST method using angularJS:

/webinars/{webinarId}/panelists

When I run the solution locally, my angular controller, returns an error:

Zoom provides the code to be implemented to be able to, through the end point, add panelists to a webinar. Doing this using Zoom API will save us a lot of time since sometimes we have 30+ panelists per webinar.

This is something new for me, and so far I was doing ok working on the angular application, but this error has brought a new level of complexity. I found this question/answer in SO:

How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems

But I’m really out of my depth on all of this stuff and I would like to ask for some help and guidance on how I can correct this, perhaps using the example provided in the link above this paragraph.

Here is the code I have so far and it's failing:

// call zoom api to add panelists
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
        console.log(this.responseText);
    }
});
xhr.open("POST", "https://api.zoom.us/v2/webinars/"  + scope.webinarId + "/panelists");
xhr.setRequestHeader("content-type", "application/json");
xhr.setRequestHeader("authorization", "Bearer " + $scope.accessToken + ");
xhr.send($scope.panelists)

Thank you for your help, Erasmo

Answer 1

CORS should be enabled either in your web server or in the framework you are using for the backend (Larvel, Symfony, Spring Boot).

Since my answer was downvoted, I will clarify. In his particular situation he can solve the issue by using for example Express JS or http node proxy. This way instead of having https://api.zoom.us/v2/webinars/ he will use the hostname where the app is running. This is the solution when you do not have access to the webserver configuration or to the backend solution whose endpoints you want to call.