Error 401 when sending email with JavaScript and AJAX

2

I was looking for methods to send emails without PHP or as little as possible by AJAX, and I found a method on the Formspree page. It's very simple, but browsing I found this on GitHub that works perfectly to a certain extent.

At the time of placing the JavaScript that this "tool" requires, I find that it does not send the mails. Why? Well, I only have this error in the browser console:

  

POST link   
handleFormSubmit @ form-submission-handler.js: 68   
/ web / Adhara / # contact: 1 XMLHttpRequest can not load link . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' link ' is therefore not allowed access. The response had HTTP status code 401.

This is an application built with a Google script that basically sends emails through GMail that come out of a common contact form. When the email is sent with the pertinent data, it sends you to another page that contains a JSON file, they offer you a solution in .js format that makes the JSON file work with AJAX and appear a "Sent to success" message sent, so now we can not only stay on the page but we can stylize it a bit more.

The problem is that in my case, when I implement this .js I skipped the previous error in the console and the email is never sent. Above is the documentation so you can understand it, the app is developed in the link above, and this is the problematic .js .

Finally, here I leave my html (I do not attach my CSS or JS, unless necessary):

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Adhara Arts - Inicio</title>
  <link rel="shortcut icon" type="image/png" href="./img/adharaico.png">
  <link rel="stylesheet" href="./css/main.css">
  <link href="https://fonts.googleapis.com/css?family=Hind|Inconsolata|Pacifico|Roboto|Amatic+SC|Poiret+One" rel="stylesheet">
  <script type="text/javascript" src="./js/jquery.min.js"></script>
  <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
  <script type="text/javascript" src="./js/typed.js"></script>
  <script src="./js/particles.js"></script>
  <script type="text/javascript" src="./js/main.js"></script>
  <script src="./js/modernizr.custom.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.js"></script>
  <script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.js"></script>
  <script type="text/javascript" src="./js/AnimOnScroll.js"></script>
  <script type="text/javascript" src="./js/app.js"></script>
</head>

<body>
  <nav id="menu-principal">
    <ul>
      <li class="menu-button-1" style="font-weight: 400;"><a href="#inicio">Inicio</a></li>
      <li class="menu-button-2" style="font-weight: 400;">
        <a href="#nosotros">Nosotros</a></li>
      <li class="menu-button-3" style="font-weight: 400;">
        <a href="#portfolio">Portfolio</a></li>
      <li class="menu-button-4" style="font-weight: 600;">
        <a href="#contacto">Contacto</a></li>
    </ul>
  </nav>
  <div class="logo-fixed">
    <a href="#"><img src="./img/adhara-menu-logo.png" alt=""></a>
  </div>
  <section class="section parallax" id="head">
    <div class="front">
      <a href="#"><img src="./img/adhara.png" alt="Adhara" oncontextmenu="return false" ondragstart="return false"></a>
    </div>
  </section>
  <section class="section" id="inicio">
      <span class="typed"></span>
      <div id="parrafo-uno">
        <p>Hola, estás en Adhara, mira todos los productos de nuestra tienda y sientete libre de contactarnos si quieres saber más de esta movida. <br>
        Observa nuestro portafolio y avisanos si te gusta nuestro trabajo, también puedes seguirnos en nuestas redes sociales para más contenido. <br>
        Y no olvides que compartir el arte es lo más importante aquí! Disfruta.</p>
      </div>
      <div class="social-network">
        <div class="social-contain">
          <div id="Instagram"></div>
        </div>
        <div class="social-contain">
          <div id="Facebook"></div>
        </div>
        <div class="social-contain">
          <div id="Google"></div>
        </div>
      </div>
      <div id="particles-js"></div>
  </section>
  <section class="section" id="nosotros">
    <div id="bg-A">
      <div id="foto-nos">
        <div id="cover1">
          <h1>A</h1>
        </div>
      </div>
      <div id="segundo-parrafo">
        <h1>¿Quienes somos?</h1>
        <p>Somos un portafolio y tienda de arte y diseño independente. Nos gusta el arte ¡tanto como a cualquiera!
        y queremos compartir lo que hacemos. Si quieres contactarnos para encargos o ¡porque si! haz un poco de scroll ;).
        Mira a todo nuestro equipo >>AQUÍ<<.
        Y no te pierdas de nada ¡Mira todo lo que hay disponible! ¡y quedate con algo!. <strong>Es una orden.</strong>  </p>
        <p id="cratividad"><br>"La creatividad es permitirte a ti mismo cometer errores. El arte es saber cuáles mantener".<br></p>
        <p>-Scott Adams.</p>
      </div>
    </div>
  </section>
  <section class="grid-section" id="portfolio">
    <div id="grid-title">
      <h1>Mira nuestro trabajo</h1>
    </div>
     <div class="grid-contain">
      <ul class="grid effect-2" id="grid">
        <li class="grid-sizer"></li>
        <li class="grid-item">
          <a class="img-wrap" href="#">
            <img src="./img/grid-i-1.jpg" alt="">
          </a>
        </li>
        <li class="grid-item">
          <a class="img-wrap" href="#">
            <img src="./img/grid-i-2.jpg" alt="">
          </a>
        </li>
        <li class="grid-item">
          <a class="img-wrap" href="#">
            <img src="./img/grid-i-3.jpg" alt="">
          </a>
        </li>
        <li class="grid-item">
          <a class="img-wrap" href="#">
            <img src="./img/grid-i-4.jpg" alt="">
          </a>
        </li>
        <li class="grid-item">
          <a class="img-wrap" href="#">
            <img src="./img/grid-i-5.jpg" alt="">
          </a>
        </li>
        <li class="grid-item">
          <a class="img-wrap" href="#">
            <img src="./img/grid-i-6.jpg" alt="">
          </a>
        </li>
        <li class="grid-item">
          <a class="img-wrap" href="#">
            <img src="./img/grid-i-7.jpg" alt="">
          </a>
        </li>
        <li class="grid-item">
          <a class="img-wrap" href="#">
            <img src="./img/grid-i-8.jpg" alt="">
          </a>
        </li>
        <li class="grid-item">
          <a class="img-wrap" href="#">
            <img src="./img/grid-i-9.png" alt="">
          </a>
        </li>
        <li class="grid-item">
          <a class="img-wrap" href="#">
            <img src="./img/grid-i-10.jpg" alt="">
          </a>
        </li>
        <li class="grid-item">
          <a class="img-wrap" href="#">
            <img src="./img/grid-i-11.jpg" alt="">
          </a>
        </li>
        <li class="grid-item">
          <a class="img-wrap" href="#">
            <img src="./img/grid-i-12.jpg" alt="">
          </a>
        </li>
      </ul>
    </div>
  </section>
  <section class="section" id="contacto">
    <div class="bg-con">
      <div class="h1-con">
        <h1>Envianos un saludo</h1>
      </div>
      <div class="contenedor-formulario">
        <form id="gform" action="https://script.google.com/macros/s/AKfycbyhl9S5fO406P61lezf_mmSh5Oq5s_SeZw1a6tMnHIlP3xkgw0/exec" class="formulario" name="Formulario-contacto" method="post">
          <div class="inputs">
            <input class="text" type="text" name="name" id="name" required="Requerido">
            <label class="label label-text" for="name">Nombre</label>
          </div>
          <div class="inputs">
            <input class="text" type="email" name="email" id="email" required="Requerido">
            <label class="label label-text" for="nombre">Correo</label>
			<span id="email-invalid" style="visibility:hidden">Must be a valid email address</span>
          </div>
          <div class="inputs mensaje">
            <textarea id="message" name="message" required="Requerido"></textarea>
            <label class="label label-text" for="message">Mensaje</label>
          </div>
          <div class="inputs">
            <input class="enviar" type="submit" id="btn-submit" value="Enviar">
          </div>
        </form>
      </div>
	  <div style="display:none;" id="thankyou_message">
    <h2><em>Gracias</em> por contactarnos!
      Estaremos de vuelta contigo pronto!</h2>
  </div>
    </div>
  </section>
  <div class="ante-footer">
    <div id="sn-container">
      <p><a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Google</a></p>
    </div>
  </div>
  <footer><p>Copyright © Adhara Arts 2017 - Created by <a href="#">DC Arts.</a></p></footer>
  <script data-cfasync="false" type="text/javascript" src="./js/form-submission-handler.js"></script>
</body>

</html>
    
asked by Dєηyη Crawford 14.06.2017 в 12:59
source

3 answers

1

Ok, since this could be a useful discussion, I will explain how to solve the problem.

I found the solution by my own means and in reality it is quite simple, the problem lies when developing the application, it turns out that I left the default configuration of the application version, this configuration only allows you (owner of the Google account) as a user to use it, so the only thing I did was to make another version of the application allowing all users including anonymous to use it. The problem is that perhaps they should highlight the necessary configurations in the Github documentation. However thanks for answering the question, and for clarifying any questions:

1- The problem will persist both in local (Apache or node.js) and in a web server. I did tests on 000Webhost.

2- I do not think there is any problem using the version of the .js in local and in the same way with the cdn.

Finally we can only say that it is a very useful tool and I really recommend it, you can use both personal and business (Gmail) and it is much easier than the problematic PHP for beginners in this world. And it's much more controllable, private and unlimited than our friend Formspree which is really very useful up to 1000 emails a month. I hope you use this method if you are interested. Thank you.

    
answered by 14.06.2017 в 21:11
0

The problem

This error occurs because you are doing a XMLHttpRequest to a different domain than your page ( in this case the domain of Google Script). Therefore, the browser is blocking it, as it usually allows only requests at the same source for security reasons.

One Solution

  • Make a CORS cross domain request.

Here is a tutorial on how to use CORS

For more details see in SO in English:

Especially the accepted response of the first link and comments.

    
answered by 14.06.2017 в 15:41
0

The problem is how you have added the problematic JavaScript.

One solution is to replace the call to the local copy of the problematic code by the line indicated in step 10 of the instructions on GitHub.

<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>

Below is an example (verifiable and complete minimum) that copies a fragment of the code in the question and replaces the line indicated above.

<section class="section" id="contacto">
  <div class="bg-con">
    <div class="h1-con">
      <h1>Envianos un saludo</h1>
    </div>
    <div class="contenedor-formulario">
      <form id="gform" action="https://script.google.com/macros/s/AKfycbyhl9S5fO406P61lezf_mmSh5Oq5s_SeZw1a6tMnHIlP3xkgw0/exec" class="formulario" name="Formulario-contacto" method="post">
        <div class="inputs">
          <input class="text" type="text" name="name" id="name" required="Requerido">
          <label class="label label-text" for="name">Nombre</label>
        </div>
        <div class="inputs">
          <input class="text" type="email" name="email" id="email" required="Requerido">
          <label class="label label-text" for="nombre">Correo</label>
          <span id="email-invalid" style="visibility:hidden">Must be a valid email address</span>
        </div>
        <div class="inputs mensaje">
          <textarea id="message" name="message" required="Requerido"></textarea>
          <label class="label label-text" for="message">Mensaje</label>
        </div>
        <div class="inputs">
          <input class="enviar" type="submit" id="btn-submit" value="Enviar">
        </div>
      </form>
    </div>
    <div style="display:none;" id="thankyou_message">
      <h2><em>Gracias</em> por contactarnos! Estaremos de vuelta contigo pronto!</h2>
    </div>
  </div>
</section>

<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
    
answered by 14.06.2017 в 15:47