CORS issue after ajax post request

[Pepe_Serralvo]

Hi!

We've built a LP that has an ajax POST call to an external url. We call this url when a form is sent and then we wait for their answer back with some data that we have to show to the user in a thank you page.

var dataToSend = ' {"firstname": "' + form.vals().FirstName + '","lastname": "' + form.vals().LastName + '","email": "' + form.vals().Email + '"}';
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://exampleurl');
xhr.setRequestHeader('Content-type','application/json');
xhr.send(dataToSend);
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
	console.log(this.responseText);
  }
};

We didn't create a marketo webhook because it was recommended to do a POST call directly in the page using XHR since we have to wait for the server's answer in order to send the user to the thank you page with the data that they send back.

Now we are getting this CORS error and we are not sure is the issue is with our side (marketo) or with the server where we are sending the POST call:

Access to XMLHttpRequest at "" from origin "" has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

We tried to add another headers but didn't work either:

xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.setRequestHeader("Access-Control-Allow-Credentials", "true");
xhr.setRequestHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
xhr.setRequestHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

Did anyone create something like this and made it work? Or someone experience this issue before and fixed it?

Thanks!!

[SanfordWhiteman · Accepted solution]

Your server needs to not only allow POSTs from the origin using Access-Control-Allow-Origin (origin = your Marketo LP domain including protocol, like https://pages.example.com), it also needs to allow the Content-Type header using Access-Control-Allow-Headers.

The error is because the client (browser) is sending what's called a preflight check and not getting the correct Access-Control-Allow-Headers back, so it does not believe it's permitted to send Content-Type: application/json in the subsequent, real request.

Also, you can't add CORS response headers to an outbound request, that wouldn't make sense.

[Pepe_Serralvo]

Thanks Sandform!

We have already contacted the guys who manage the server.