Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Angelina Bethoney
Angelina Bethoney
117 Points
Posted by Angelina Bethoney
Angelina Bethoney
117 Points

CORS issue submitting forms using AJAX

Hi,

I'm building a simple single page app with JS. I have a form on my contact page, and I'm trying to send the client information to a Google Doc. I'm receiving this error:

XMLHttpRequest cannot load https://docs.google.com/document/d/1E1OPzBRy2MLPzvQrnlAgzCX9OJqa1t0XrWGNGHl2O9Y/pub. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 405.

Here is my AJAX request:

 var dataString = 'name='+ first_name + ' '+ last_name + '&email= ' + email + '&phone= ' + phone + '&comments= ' + comments,
 url = "https://docs.google.com/document/d/1E1OPzBRy2MLPzvQrnlAgzCX9OJqa1t0XrWGNGHl2O9Y/pub";

 $.ajax({
              type: "POST",
              crossDomain: true,
              url: url,
              data: dataString,
              // headers: {Access-Control-Allow-Origin: *},
              success: function() {
                $('#contact_form').html("<div id='message'></div>");
                $('#message').html("<h2>Contact Form Submitted!</h2>")
                .append("<p>We will be in touch soon.</p>")
                .hide()
                .fadeIn(1500, function() {
                  $('#message').append("<img id='checkmark' src='../images/about-img.jpg' />");
                });
              }
            });
            return false;
        })

I've read a bunch of articles that claim Access-Control-Allow-Origin should do the trick, but JSLint (which I'm using) keeps throwing syntax errors on that particular line, preventing gulp from serving my app.

Are there any suggestions as to how to make this work? thanks in advance!

Greg Kaleka
Greg Kaleka
39,020 Points
Greg Kaleka
Greg Kaleka
39,020 Points

FYI, I tweaked your code markdown to make it more readable. Click the little three-dots icon above and choose edit to see what I did for future reference :).

1 Answer

Greg Kaleka
Greg Kaleka
39,020 Points
Greg Kaleka
Greg Kaleka
39,020 Points

Hi Angelina,

I first found this SO post, which has some good information, and helped me google well enough to find the link below.

It sounds like you need to enable CORS on your server (in this case, on your local machine). Hopefully you're comfortable on the command line? If so, this page may fix your problem.

Good luck! Keep us posted :)