SOLVED

Re: CORS issue after ajax post request

Go to solution
Pepe_Serralvo
Level 2

CORS issue after ajax post request

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!!

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: CORS issue after ajax post request

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.

View solution in original post

2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator

Re: CORS issue after ajax post request

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
Level 2

Re: CORS issue after ajax post request

Thanks Sandform!

 

We have already contacted the guys who manage the server.