title: How to solve: Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
body: <p>I am trying to call javascript using visualforce (VF) page. On clicking preview  in VF page, method is executed. But, when I tried to see the response in Google chrome getting "blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource" error. Below is the sample code for VF.</p>
  
  <pre><code>&lt;apex:page controller="calljavascript_cls" &gt;
  
  &lt;script&gt;
  
  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();
  
  
   }
  
   &lt;/script&gt;
  
   &lt;apex:outputText value="{!callfunc}" escape="false"&gt;&lt;/apex:outputText&gt;
  
    &lt;/apex:page&gt;
  </code></pre>
  
  <p>Apex controller class:</p>
  
  <pre><code>public class calljavascript_cls
  
  {
  
   public string callfunc{get;set;}
  
  
   public calljavascript_cls()
  
   {
  
     callfunc='&lt;script&gt; func(); &lt;/script&gt;';
  
   }
  
   }
  </code></pre>
  
  <p>I tried the solutions given in below link. Not working.</p>
  
  <p><a href="https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present">Link1</a>
  <a href="https://www.html5rocks.com/en/tutorials/cors/" rel="nofollow noreferrer">Link2</a></p>
  
  <p>Don't know how to proceed. Please help me.</p>