Form To Email CORS Policy Trouble

Hello,

After setting the correct options to my project I got my contact form displaying with out errors in the debug console.

Now I am facing CORS Policy problems.

After filling the required fills and click the submit button I got this error:

If I go to Network tab it shows this error:

And If I click on serverconectForm.js I got this:

I’ve been searching and most of the solutions indicate to add the following lines to Apache Server configuration File:

Header always set Access-Control-Allow-Origin “*”
Header always set Access-Control-Allow-Methods “POST, GET, OPTIONS, DELETE, PUT”
Header always set Access-Control-Max-Age “1000”
Header always set Access-Control-Allow-Headers “x-requested-with, Content-Type, origin, authorization, accept, client-security-token”

I’ve done with out success.

If you have read until here I really appreciate any guidance you can provide to solve this.

Thanks and Regards

You still have file:// links on your page somewhere. That’s the problem. There should not be any link starting with file://

Hi @Teodor

I don’t get your point.

All my references are pointing to fille/// C:/…

Starting from Project Settings it has same link

For example style.css points to: file:///C:/Apache24/htdocs/WapplerDevs/MedicertRegistro/css/style.css and it is correctly displaying styles

Kindly, explain why it whould not be any link starting with file:///

Your project settings are fine using such links.

The problem is that on your web pages you should never have such links. They should be either site root relative (starting with /) or page relative (starting with ../ or folder/file.css)

There is something really wrong either with your site setup or with your server configuration.

I pretty sure there is nothing to do with server configuration.

Before installing Apache and PHP as a local server I developed two more sites.

I already checked them and the also have such those links, as you can see in the next image

If i check the same at online website it shows as you expect. That site works fine in local and on line

I also developed from scratch an email function with PHP, and used it instead of server action created with Wappler, and mine is working fine

Can someone provide to me some guidance regarding how Wappler handles with CORS Policy ?

The CORS issue is caused by the file:// links used! And it is not right to have these links on your pages.
Please copy and paste your page code here for inspection.

If you don’t know how to configure an Apache server why not install a ready to use package like WAMP, which includes it?

Thanks in advance @Teodor Teodor

I selected that way because I already have mysql and sqlserver databases engines installed and I didnt think it would be such a problem

If you think that will solve the problem, I will uninstall Apache and PHP and install a WAMP package

Attaching complete Site in zip format. I only changed SMTP parameters to protect my gmail account password
MedicertRegistro.zip (1.2 MB)

Contact Form is :

<!doctype html>

<html>

<head>

    <meta name="ac:base" content="/WapplerDevs/MedicertRegistro">

    <script src="dmxAppConnect/dmxAppConnect.js"></script>

    <meta charset="UTF-8">

    <title>Untitled Document</title>

    <link rel="stylesheet" href="css/style.css" />

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

    <link rel="stylesheet" href="dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>

    <script src="dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer=""></script>

    <link rel="stylesheet" href="dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />

    <script src="dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer=""></script>

</head>

<body is="dmx-app" id="index">

    <header id="header">

        <div class="container">

            <div class="row">

                <div class="col">

                    <nav class="navbar navbar-light navbar-expand-lg fixed-top">

                        <a class="navbar-brand" href="#">

                            <img src="assets/images/Logo_Medicert.jpg" alt="TennYou">

                        </a>

                        <button class="navbar-toggler text-black-50" type="button" data-toggle="collapse" data-target="#collapse2" aria-controls="collapse2" aria-expanded="false" aria-label="Toggle navigation">

                            <span class="navbar-toggler-icon"></span>

                        </button>

                        <div id="collapse2" class="collapse navbar-collapse  justify-content-end">

                            <div class="navbar-nav text-black-50">

                                <a class="nav-item nav-link font-weight-bold" href="stro/index.html">INICIO</a>

                                <a class="nav-item nav-link font-weight-bold" href="stro/index.html">NUESTRAS SOLUCIONES</a>

                                <a class="nav-item nav-link font-weight-bold" href="contacto.html">CONTACTO</a>

                            </div>

                        </div>

                    </nav>

                </div>

            </div>

        </div>

    </header>

    <section>

        <div class="container">

            <div class="row">

                <div class="col">

                    <p>Just testing <br>I just wonder why this is not working for me</p>

                </div>

            </div>

        </div>

    </section>

    <section id="Contacto" class="form-contacto">

        <h2 class="display-4">Formulario de Registro</h2>

        <div class="container">

            <div class="row">

                <div class="col-sm-12">

                    <p class="text-center">Bienvenido al programa de gestión médica de Medicert, somos un equipo dedicado a solucionar las necesidades de atención médica, orientar y hacer más eficientes Los gastos que debas afrontar.

                        Por favor llena el formulario para inscribirte en el programa sin costo. Te estaremos contactando a la brevedad.</p>

                </div>

            </div>

        </div>

        <div class="container">

            <form id="formulario-registro" class="form needs-validation" method="post" is="dmx-serverconnect-form" dmx-on:success="formularioregistro.reset()" action="dmxConnect/api/FormEmailNotification.php">

                <div class="form-row justify-content-center">

                    <div class="col-sm-12 col-md-6 col-lg-4">

                        <div class="row">

                            <label for="Nombre">Nombre</label>

                        </div>

                        <div class="row">

                            <input class="form-control" type="text" id="Nombre" placeholder="Escribe tu nombre" required="" data-msg-required="Este campo es obligatorio">

                        </div>

                    </div>

                    <div class="col-sm-12 col-md-6 col-lg-4">

                        <div class="row">

                            <label for="Nombre">Apellido Paterno</label>

                        </div>

                        <div class="row">

                            <input class="form-control" type="text" id="Ap_Paterno" placeholder="Escribe tu apellido paterno" required="">

                        </div>

                    </div>

                    <div class="col-sm-12 col-md-6 col-lg-4">

                        <div class="row">

                            <label for="Nombre">Apellido Materno</label>

                        </div>

                        <div class="row">

                            <input class="form-control" type="text" id="Ap_Materno" placeholder="Escribe tu Apellido Materno" required="">

                        </div>

                    </div>

                    <div class="col-sm-12 col-md-6 col-lg-4">

                        <div class="row">

                            <label for="email">Teléfono de casa / oficina</label>

                        </div>

                        <div class="row">

                            <input class="form-control" type="email" id="tel_fijo" placeholder="Teléfono">

                        </div>

                    </div>

                    <div class="col-sm-12 col-md-6 col-lg-4">

                        <div class="row">

                            <label for="email">Teléfono móvil</label>

                        </div>

                        <div class="row">

                            <input class="form-control" type="email" id="tel_cel" placeholder="Teléfono">

                        </div>

                    </div>

                    <div class="col-sm-12 col-md-6 col-lg-4">

                        <div class="row">

                            <label for="email">E-mail</label>

                        </div>

                        <div class="row">

                            <input class="form-control" type="email" id="email" placeholder="Correo electrónico" required="">

                        </div>

                    </div>

                    <div class="col-sm-12 col-md-6 col-lg-4">

                        <div class="row">

                            <label for="Sexo">Sexo</label>

                        </div>

                        <div class="row">

                            <Select class="form-control" id="Sexo" required="">

                                <option value="Femenino">Femenino</option>

                                <option value="Masculino">Masculino</option>

                                <option value="Selecciona">Selecciona</option>

                            </select>

                        </div>

                    </div>

                    <div class="col-sm-12 col-md-6 col-lg-4">

                        <div class="row">

                            <label for="FechaNacimiento">Fecha de Nacimiento</label>

                        </div>

                        <div class="row">

                            <input class="form-control" type="text" id="FechaNacimiento" placeholder="Selecciona tu fecha de nacimiento" required="" is="dmx-date-picker">

                        </div>

                    </div>

                </div>

                <div class="form-row justify-content-center">

                    <div class="col-sm-12 col-md-6 col-lg-4">

                        <button type="submit">

                            <span>Enviar</span>

                        </button>

                    </div>

                </div>

            </form>

            <div id="success_message" style="width:100%; height:100%; display:none; ">

                <h3>Posted your message successfully!</h3>

            </div>

            <div id="error_message" style="width:100%; height:100%; display:none; ">

                <h3>Error</h3>

                Sorry there was an error sending your form.

            </div>

        </div>

    </section>

    <!-- ************* Agregamos validacion form ************* -->

    <script>

        (function() {

        'use strict';

        window.addEventListener('load', function() {

            var forms = document.getElementsByClassName('needs-validation');

            var validation = Array.prototype.filter.call(forms, function(form) {

                form.addEventListener('submit', function(event) {

                    if (form.checkValidity() === false) {

                        event.preventDefault();

                        event.stopPropagation();

                    }

                    form.classList.add('was-validated');

                }, false);

            });

        }, false);

    })();

    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>

</html>

@Teodor I already uninstalled my yesterday’s Apache and PHP installation and install Wamp Package

Just created a basic site and as you can see in the image I’m getting same result links having File///

I will replicate same contact form, test it and let you know

Your page source looks fine, Wappler generated the correct links.
I will check what’s going wrong.

Your screenshot shows you are loading the page wrongly. You can’t just load the page from a folder on your computer, by double clicking the HTML file.
You need to load it through your server, using http:// link/url.

Ffffff…

I didn’t know that. What a Rookie I am.

I already did it , in the right way and it shows as:

Let me configure the serveraction again and let you know if it works

Well that’s why you add a target url in the target settings so when you click F12 it loads the page in the browser properly.

I’m really sorry for that . I Just finished and Tested it

CORS Policy error solved :ok_hand:

Now I’am getting only this one.

Please check the exact error returned as explained here:

Probably a validation error?

I just finished debbuging. Yes it was a validation error and I corrected it.

Now , no errors shown, Contact Form has been cleaned.

I got 200 code OK

But I didnt received any mail, I also reviewed outbox within sender account and there is no mail sent.

@Teodor
I just delete my gmail acount and password from mailer settings, in order to test if I got an error, but I didn’t get any error. Shouldn’t it throws an error because of missing gmail credentials?

What can be the problem?

Well from within Wappler … so it loads your page in your browser.
Or click the open in browser button:

Screenshot_20