title: Google Tag Manager Cross-Origin Request to an Api Blocked
body: <p>I'm trying to get some data from our API (<strong>myapi.com</strong>) to display in our frontend application (<strong>www.myfrontend.com</strong>). </p>
  
  <p>On <strong>myfrontend.com</strong>'s gtm, I have a tag that request myapi.com for some data:</p>
  
  <pre><code>  var HttpClient = function() {
      this.get = function(aUrl, aCallback) {
          var anHttpRequest = new XMLHttpRequest();
          anHttpRequest.onreadystatechange = function() {
              if (anHttpRequest.readyState == 4 &amp;&amp; anHttpRequest.status == 200)
                  aCallback(anHttpRequest.responseText);
              }
              anHttpRequest.open("GET", aUrl, true);
              anHttpRequest.send(null);
          }
      }
  var theurl = 'https:\/\/myapi.com/data?id=1';
  var client = new HttpClient();
  client.get(theurl, function(response) {
      var response1 = JSON.parse(response);
      console.log(response1.content);
  }); 
  </code></pre>
  
  <p>I'm getting a CORS error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="https://myapi.com/data?id=1" rel="nofollow noreferrer">https://myapi.com/data?id=1</a></p>
  
  <p>I added the api to the access control origin header: </p>
  
  <pre><code>access-control-allow-origin https://myapi.com
  </code></pre>
  
  <p>I can see in the network, the request to the api is successful and I can see the data but it nevers gets to my console. </p>
  
  <p>Any help is appreciated, thank you!</p>