1

I'm totally new with frontend frameworks. I'm currently building my portfolio with Vue.js and I have a contact form in it where I want to send the data the user put (name, email, message) to a PHP file (or whatever) with Axios so I can send it to my email. How can I achieve that?

This is my folder structure: enter image description here

Can I just create a "sendEmail.php" file somewhere and do a POST request to it with Axios, vue-resource or whatever? That's what I tried but I get a 404 (Not Found) error, I can't reach the file.

EDIT: So apparently Vue itself can't read PHP files so I had to put mine to WAMP and then call it with Axios. Next I didn't get a 404 error anymore but a CORS policy error instead:

enter image description here

I followed this Enable CORS with wamp on windows 8 and I think it KINDA worked since I'm now able to do GET requests but not POST requests enter image description here

To answer to @Jijin, here's my Axios request and PHP file:

        axios
          .post("http://localhost/test/sendEmail.php", {
            name: this.form.name,
            email: this.form.email,
            message: this.form.message
          })
          .then(response => {
            console.log(response);
          })
          .catch(error => {
            console.log(error);
          });


<?php

header('Access-Control-Allow-Origin: *');

echo "Huh hello?";

EDIT 2: It works! I added header("Access-Control-Allow-Headers: Content-Type, origin"); on top of my PHP file and I can now do POST requests! enter image description here

So now I guess I can get the data from my PHP file and send the email. I will try, thanks guys!

  • I guess you didn't set up your PHP server. You cannot use PHP in vue.js. You need to set up and run your PHP server separately from your vue serve – Ehsan Sepehri Jul 05 '20 at 06:08
  • you have to run your php over php server, and if you convert your vue to SPA then you will be able to communicate between those two technology using axio over api communication – Mahamudul Hasan Jul 05 '20 at 06:09
  • Also, if you mean how to use Using Vue.js components in PHP applications, you can refer to this link: https://codeburst.io/using-vue-js-components-in-php-applications-e5bfde8763bc – Ehsan Sepehri Jul 05 '20 at 06:12
  • Thanks guys, so what I did is putting my PHP file into WAMP and then I called it with Axios to the URL "http://localhost/test/sendEmail.php", is that the way to do it? Now I don't have a 404 error but a CORS policy error instead. –  Jul 05 '20 at 06:54
  • 1
    @Nelwinx put ``` header('Access-Control-Allow-Origin: *'); ``` in top of your sendEmail.php, effective way is specify origin header('Access-Control-Allow-Origin: https://www.example.com') – Jijin Jul 05 '20 at 07:13
  • @Jijin I followed this https://stackoverflow.com/questions/27058104/enable-cors-with-wamp-on-windows-8 and now I'm able to do GET requests (yeah!) but not POST and that's what I want :/ . I tried what you gave me but it's not working –  Jul 05 '20 at 07:26
  • @Nelwinx header('Access-Control-Allow-Origin: *'); adding this will fix your cors issue, can you share if there is any new error ?? , and your axios code(vue) – Jijin Jul 05 '20 at 07:31
  • @Jijin I edited my post since I don't think I can properly show you code in here, check it out –  Jul 05 '20 at 07:45
  • Your code looks fine, what was the response when you do a post request ? , is it blank – Jijin Jul 05 '20 at 07:55
  • @Jijin It says "Access to XMLHttpRequest at 'http://localhost/test/sendEmail.php' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response." –  Jul 05 '20 at 08:00
  • 1
    if it says `Access-Control-Allow-Headers` then you could activate the headers `header("Access-Control-Allow-Headers: Content-Type, origin");` – bill.gates Jul 05 '20 at 08:02
  • 1
    you might also need to allow `Options` so: `header("Access-Control-Allow-Methods: POST, GET, OPTIONS");` – bill.gates Jul 05 '20 at 08:03
  • @Ifaruki It worked!! Check out my 2nd edit! Thanks man –  Jul 05 '20 at 08:20
  • Does this answer your question? [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header) – Quentin Jul 05 '20 at 08:22
  • By the way guys, when I'm going to deploy my project on a server, how do I deal with it? This time I will be able to put my PHP file into my project and call it from there since the server will be able to read it? Should it be in the "public" folder or it doesn't matter? –  Jul 05 '20 at 10:04

0 Answers0