Get request works with jquery ajax but gets CORS error with javascript fetch

Question

I want to add emails to my Mailchimp subscription list. I followed this answer And got it to work with jquery.

Now I have this form:

<form action="https://herokuapp.us5.list-manage.com/subscribe/post-json?u=070e69e5e3e6e664a8066e48f&amp;id=0bf75ac6c4&c=?" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate newsletter__form" target="_blank">

      <label for="mce-EMAIL">Ingresa tu correo electrónico:</label>
      <input type="email" placeholder="ejemplo@gmail.com" value="" name="EMAIL" class="required textfield email__textfield" id="mce-EMAIL">
      <input type="submit" value="suscribirme" name="subscribe" id="mc-embedded-subscribe" class="button raise">

      <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
      </div> 
  
</form>

And I had this jquery code:


    function register(form) {
    $.ajax({
        type: $(form).attr('method'),
        url: $(form).attr('action'),
        data: $(form).serialize(),
        processData: false,  // tell jQuery not to process the data
        contentType: false,   // tell jQuery not to set contentType
        cache       : false,
        dataType    : 'json',
        error       : function(err) { alert("Could not connect to the registration server. Please try again later."); },
        success     : function(data) {
            if (data.result != "success") {
                // Something went wrong, do something to notify the user. maybe alert(data.msg);
                alert("smt went wrong :( ")
                alert(data.msg)

            } else {
                // It worked, carry on...
                alert("it worked!!")
            }
        }
    });
    return false; 
    }

Now that jquery doesn't give me any error. Everything works fine. But I would like to this with javascript fetch because I hate jquery. So I did this to trick the action and let me pass the parameters I need just like in the jquery request:

    function register(form) {
        let data = new FormData(form);
        data = Object.fromEntries(data);
        data = Object.entries(data);
        let arroba = /@/gi;

        let action = form.getAttribute("action")+ "&"+ data[0][0] +"="+ data[0][1].replace(arroba, '%40') + "&" + data[1][0] + "=" + data[1][1]
        console.log(action)
        fetch(action, {
            method: 'get',
            dataType:'json',
            cache: 'no-cache',
            headers: {
                'content-type': 'application/json; charset=utf-8'
            },
        })
        .then(response => response.json())
        .then(result => {
            console.log("something")
        })
        .catch(error => {
            alert("Could not connect to the registration server. Please try again later."+ error)
        });
    }

And when I try it with fetch I get CORS error In the answer I mentioned above they mentioned I should append &c=? at the end of the forms action to avoid CORS error from the Mailchimp API. And it seems to work with jquery code but not with fetch.

Also this are the URLS I get:

using jquery ajax:
https://herokuapp.us5.list-manage.com/subscribe/post-json?u=070e69e5e3e6e48f&id=0bf123c6c4&c=jQuery351050225527_1633147928440&EMAIL=email123456%40gmail.com&b_e69e54a8066e48f_0bf75ac6c4=&_=1633284551


using javascript fetch:
    https://herokuapp.us5.list-manage.com/subscribe/post-json?u=070e69e5e3e6e48f&id=0bf75ac6c4f&id=0bf123c6c4&c=?&EMAIL=email123%40gmail.com&b_e69e54a8066e48f_0bf75ac6c4=

How do I get it to work without CORS error?

Get request works with jquery ajax but gets CORS error with javascript fetch

0 Answers0