Event tracking CORS issue

Ask a question
1

I am trying to use event tracking via client side javascript.

I have a function that calls the event tracking endpoint:

function activeCampaignEvent(email) {
  var url = "https://trackcmp.net/event";
  var email = encodeURIComponent(email);
  var event = "leadform-cta";
  var id = "MY_ID";
  var key = "MY_KEY";
  var data = "actid=" + id + "&key=" + key + "&event=" + event + "&visit=%7B%22email%22%3A%22" + email + "%22%7D";
  var xhr = new XMLHttpRequest();
  xhr.open("POST", url);
  xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  xhr.send(data);
}

I get the following error when it is run:

XMLHttpRequest cannot load https://trackcmp.net/event. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘MY_DOMAIN_HERE’ is therefore not allowed access.

I am able to execute a similar request via curl locally. And that does work. But of course I need to be able to call this request via my website too.

Any ideas? Thanks.

2 Likes
2

Hey @tidalmigrations1,

couple things:

  1. be careful sending events client side like that, since you are exposing your keys. It is a bit better to proxy the request through a server somehow.
  2. I get the CORS error too when I set it up manually, but the event seems to go through anyway
  3. I no longer fire events client-side this way. I instead prefer to use a tool like BigPicture.io or Segment to fire them.
2 Likes
3

Hmm ok that does make sense. I guess I will have to proxy the request.
Thanks for the help.

4

Hi @jskole

We’re trying to send the events client side via AJAX and it seems they’re still not going through despite whitelisting the site due to CORS. Is there a way to ensure the events actually go through?

5

Hi @kakabargains,

To avoid the CORS issue for client-side ajax calls, you will need to proxy the requests through a server.