Request failing with "No 'Access-Control-Allow-Origin' header"

Question

I've created a form using Get Response (the email client) and am trying to use ajax on the form to create a custom success/fail message. The code works fine. However when I link the ajax to the form it stops working and I receive the below error message. Would appreciate any help.

Error: XMLHttpRequest cannot load https://app.getresponse.com/add_subscriber.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.

<form id="email-form-2" name="email-form-2" accept-charset="utf-8" action="https://app.getresponse.com/add_subscriber.html" method="post">
 <input type="text" placeholder="Your Name" name="name">
     <input type="text" placeholder="Your Email" name="email">
       <textarea placeholder="Your Message..." name="custom_comment"></textarea>
          <input type="hidden" name="campaign_token" value="XYZ" />
          <input type="submit" value="Send Message" data-wait="Please wait...">
        </form>
        <div>
          <p>Thanks for contacting us :)</p>
        </div>
        <div>
          <p>Darn. It didn't work. Give it another shot and see what happens :)</p>
        </div>

         <script type="text/javascript">
          $(function () {
           $('#email-form-2').submit(function (e) {
           e.preventDefault();
           $.ajax({
            url: this.action,
            data: $(this).serialize(),
            type: 'POST'
            }).done(function () { 
           $("#email-form-2+div.w-form-done").show();
           $("#email-form-2+div.w-form-fail").hide();
           $("#email-form-2").hide();
          })
           .fail(function () { 
           $("#email-form-2+div.w-form-done").hide();
           $("#email-form-2+div.w-form-fail").show();
           $("#email-form-2").show();
         });
       });
   });
</script>

@Quentin, I am reopening this, as this is no way is a duplicate, as this is entirely a different issue. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Oct 22, 2015 at 16:14
It's the same issue. It's yet another "I got a CORS error message and couldn't be bothered to google it" problem, and the solution is covered by the second heading of the accepted answer. — Quentin
– Quentin, Commented Oct 22, 2015 at 16:16
@Quentin This is "I have been there, I have done that" kinda issue, something confusing. Let it be open. I will figure out the right way and answer it, coz I am definitely sure, the OP cannot modify the server side web service that is hosted by a 3rd party. :) — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Oct 22, 2015 at 16:27
Happily, other answers on the duplicate question cover circumstances when you are trying to access a third party service. I count 3 different answers there that recommend using a proxy. — Quentin
– Quentin, Commented Oct 22, 2015 at 16:28

Praveen Kumar Purushothaman · Accepted Answer · 2015-10-22 18:15:43Z

1

Okay, I would suggest you to use cURL using any language you prefer in the server side. For now I can suggest you cURL and PHP. Try this in proxy.php:

<?php 
    // create curl resource 
    $ch = curl_init(); 

    // set url 
    curl_setopt($ch, CURLOPT_URL, "https://app.getresponse.com/add_subscriber.html");

    //return the transfer as a string 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    // $output contains the output string
    $output = curl_exec($ch);

    // close curl resource to free up system resources
    curl_close($ch);

    // output
    die($output);
?>

And now you can use proxy.php in your AJAX requests as it is in the same domain. You also have another way:

<?php
    die(file_get_contents("https://app.getresponse.com/add_subscriber.html"));
?>

answered Oct 22, 2015 at 18:15

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joshua Dannemann Over a year ago

Um... The reason this works is because it is a get request. There is no need for proxy server-side code.

Joshua Dannemann Over a year ago

It is a get request by default unless otherwise specified as a post. This was one of my suggestions in the answer I posted- change it to a get request.

Collectives™ on Stack Overflow

Request failing with "No 'Access-Control-Allow-Origin' header"

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related