POST to an external API from visualforce page

Question

I am using OpenCTI in Lightning to enable click to dial. I want to click on the phone number and call an external API to make the dial.

I have a visualforce page as CTI Adapter. When the page loads it enables click to dial, and adds onClickToDial listener.

When the phone number is clicked, I want to do a POST to an external API.

Here is what I have tried:

            var clickToDialListener = function(payload){
                makeDial(payload.number);
            };

            function registerClickToDial(){
                sforce.opencti.onClickToDial({
                    listener: clickToDialListener
                });
            }

            function makeDial(phoneNumber){
                var postBody = {
                   "extension": "999",
                   "dialed_number":"4426578435"
                };

                var bearerToken = 'Bearer ' + accessToken;

                const xhr = new XMLHttpRequest();
                const url = 'https://my.apiUrl.com/admin/click2dialapi_sb/make-call';
                xhr.open("POST", url, true);            
                xhr.setRequestHeader('Authorization', bearerToken);         
                xhr.send(JSON.stringify(postBody));
            }

When I click on the phone number, I get a console error that says

Access to XMLHttpRequest at 'https://my.apiUrl.com/admin/click2dialapi_sb/make-call' from origin 'https://c.na59.visual.force.com' has been blocked by CORS policy. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I added the POST url, and https://c.na59.visual.force.com to the salesforce CORS whitelist but still the same error.

How can I do a POST from visualforce page?

Answer 1

This may or may not solve your issue but it did for me when I ha a similar issue. I do not recall the source but you will need to add the following headers:

xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
xhr.setRequestHeader('Access-Control-Allow-Headers', 'Content-Type, Content-Range, Content-Disposition, Content-Description');