Javascript 如何解决：被CORS策略阻止：否'；访问控制允许原点'；请求的资源上存在标头

我正在尝试使用visualforce（VF）页面调用javascript。在VF页面中单击预览时，将执行该方法。但是，当我试图看到Google chrome中的响应出现“被CORS策略阻止：请求的资源上不存在“访问控制允许来源”标题”错误。下面是VF的示例代码

<apex:page controller="calljavascript_cls" >

<script>

function func()

{

var request = new XMLHttpRequest();

request.open('GET', 'https://copado.herokuapp.com/json/v1/webhook/metadata/AAAA?api_key=BBBB');

request.onreadystatechange = function () {
if (this.readyState === 4) {
console.log('Status:', this.status);
console.log('Headers:', this.getAllResponseHeaders());
console.log('Body:', this.responseText);
}
};

 request.send();


 }

 </script>

 <apex:outputText value="{!callfunc}" escape="false"></apex:outputText>

  </apex:page>

我不知道怎么继续。请帮助我。
您需要根据请求设置标题“访问控制允许标题”，并且您的服务器还必须允许设置标题“访问控制允许标题”，这称为CORS

request.setRequestHeader('Access-Control-Allow-Headers', '*');

可能重复的
request.setRequestHeader('Access-Control-Allow-Headers', '*');