Home>

Build a static site without using DB.
I would like to create a inquiry form, but the production environment is an FTP server, so Node Mailer can not be used.
Therefore, I tried to use PhpMailer and tried to exchange with the NUXTJS AXIOS,
Although REQUEST has been sent without any errors in the NPM Run Dev environment, Response will return HTML code.
If you hit the NPM Run Generate and built a static site, undefined will come back.


required ↓
* Send HTTP Request from NUXT to PHP in XAMPP Environment and send mail transmission to PHP in environment from XAMPP to return RESPONSE to NUXTJS.

* PHP file is launched in a local XAMPP environment with a server where NUXT is running locally

index.vue (VUE trying to send Axios)

<
TEMPLATE >
    ≪
DIV ID= "CONTANCT" CLASS= "CONTAINER MX-AUTO MY-56 MAX-W-90" >
        ≪
div Class= "Content-Title MB-20" >
            ≪
H1 Class= "TEXT-2XL TEXT-GRAY-700" >
Contact <
/H1 >
            ≪
DIV Class= "Under-Line H-2 W-32 BG-RED-300 MB-20" >
≪
/DIV >
            ≪
Form @ submit.prevent= "Formcheck ()" class= "BG-WHITE SHADOW-MD ROUNDED PX-8 PT-6 PB-8 MB-4 Flex Flex-COL MY-2" >
                ≪
DIV Class= "-MX-3 MD: Flex MB-6" >
                    ≪
DIV Class= "MD: W-1/2 PX-3 MB-6 MD: MB-0" >
                        ≪
label
                            Class= "block UpperCase Tracking-Wide Text-Grey-Darker Text-XS Font-Bold MB-2"
                            for= "grid-first-name" >
                            Mr
                        ≪
/label >
                        ≪
Input
                            v-model= "first_name"
                            @ keyup= "Check_invalid ('first_name')"
                            Class= "Appearance-None Block W-Full BG-Grey-Lighter Text-Grey-Darker Border Border-Grey-Lighter Rounded Py-3 PX-4 MB-3"
                            ID= "grid-last-name"
                            Type= "text"
                            Placeholder= "Sato" >
                            ≪
P class= "text-red text-xs italic" >
{{errors.first_name_invalid} <
/P >
                    ≪
/DIV >
                    ≪
DIV Class= "MD: W-1/2 PX-3 MB-6 MD: MB-0" >
                        ≪
label
                            Class= "block UpperCase Tracking-Wide Text-Grey-Darker Text-XS Font-Bold MB-2"
                            for= "grid-last-name" >
                            Name
                        ≪
/label >
                        ≪
Input
                            @ keyup= "check_invalid ('Last_Name')"
                            v-model= "LAST_NAME"
                            Class= "Appearance-None Block W-Full BG-Grey-Lighter Text-Grey-Darker Border Border-Grey-Lighter Rounded Py-3 PX-4 MB-3"
                            ID= "grid-last-name"
                            Type= "text"
                            PlaceHolder= "Honda" >
                            ≪
P class= "text-red text-xs italic" >
{{errors.last_name_invalid} <
/P >
                        ≪
/DIV >
                    ≪
/DIV >
                        ≪
DIV Class= "-MX-3 MD: Flex MB-6" >
                            ≪
DIV Class= "MD: W-Full PX-3" >
                                ≪
label
                                    Class= "block UpperCase Tracking-Wide Text-Grey-Darker Text-XS Font-Bold MB-2"
                                    for= "Grid-Password" >
                                    mail address
                                ≪
/label >
                                ≪
Input
                            @ keyup= "check_invalid ('email_address')"
                                    v-model= "email_address"Class= "Appearance-None Block W-Full BG-Grey-Lighter Text-Grey-Darker Border Border-Grey-Lighter Rounded Py-3 PX-4 MB-3" ID= "Grid-Password"
                                    Type= "email"
                                    Placeholder= "[email protected]" >
                                    ≪
P class= "text-red text-xs italic" >
{{errors.email_address_Invalid} <
/P >
                            ≪
/DIV >
                        ≪
/DIV >
                        ≪
DIV Class= "-MX-3 MD: Flex MB-6" >
                            ≪
DIV Class= "MD: W-Full PX-3" >
                                ≪
label
                                    Class= "block UpperCase Tracking-Wide Text-Grey-Darker Text-XS Font-Bold MB-2"
                                    for= "Grid-Password" >
                                    mail address
                                ≪
/label >
                                ≪
TextArea
                                    @ keyup= "check_invalid ('contact_info')"
                                    V-model= "CONTACT_INFO"
                                    Class= "Appearance-None Block W-Full BG-Grey-Lighter Text-Grey-Darker Border Border-Grey-Lighter Rounded Py-3 PX-4 MB-3"
                                    ID= "Grid-Textarea"
                                    Placeholder= "Please write freely ..."
                                    Rows= "10" >
                                ≪
/TextArea >
                                ≪
P class= "text-red text-xs italic" >
{{errors.contact_info_invalid} <
/P >
                            ≪
/DIV >
                        ≪
/DIV >
                        ≪
Button Type= "Submit" Class= "inline-Block Py-3 Text-XL Text-White Shadow BG-Green-300" >
Send <
/Button >
                    ≪
/Form >
                ≪
/DIV >
            ≪
/DIV >
≪
/Template >
≪
Script >
IMPORT AXIOS from 'Axios';
    export Default {
        Env: {
            baseURL: Process.env.base_url || 'http: //localhost: 3000'
        }
        HEAD () {
            RETURN {
                Title: 'Contact | Wakaba Accounting Office',
            }
        }
        transition (to, from) {
            IF (! From) {Return 'slide-Left'}
            RETURN + to.Query.Page <
 + from.Query.Page? 'slide-right': 'slide-left'
        }
        DATA () {
            RETURN {
                first_name: '',
                LAST_NAME: '',
                Email_Address: '',
                CONTACT_INFO: '',
                Errors: {
                    first_name_invalid: '',
                    LAST_NAME_INVALID: '',
                    Email_address_invalid: '',
                    Contact_info_invalid: ''
                }
            }
        }
        Methods: {
            Formcheck () {
                IF (this.first_name== '') {
                   Return this.errors.first_name_invalid= 'is a compulsory item';
                }
                IF (this.last_name== '') {
                    Return this.errors.last_name_invalid= 'Name is a required item';
                }
                IF (this.email_address== '') {
                    Return this.errors.email_address_Invalid= 'E-mail address is a required item';
                }
                IF (this.contact_info== '') {
                    Return this.errors.contact_info_invalid= Enter your requirements. ';
                }
                //If everything is input
                IF (this.first_name!== '' &
&
 this.last_name!== '' &
&
 this.email_address!== '' &
&
 this.contact_info!== '') {
                    this.SEND_DATA ();
                }
            }
            check_invalid (Val) {
                Switch (Val) {
                case 'first_name':
                    IF (this.errors.first_name_invalid!= '' &
&
 this.first_name!= '') {
                        Return this.errors.first_name_invalid= '';} Break;
                CASE 'LAST_NAME':
                    IF (this.errors.last_name_invalid!= '' &
&
 this.last_name!= '') {
                        Return this.Errors.LAST_NAME_INVALID= '';
                    }
                Break;
                Case 'email_address':
                    IF (this.Errors.EMAIL_ADDRESS_INVALID!= '' &
&
 this.email_address!= '') {
                        Return this.errors.email_Address_Invalid= ';
                    }
                Break;
                CASE 'CONTACT_INFO':
                    IF (this.errors.Contact_Info_invalid!= '' &
&
 this.contact_info!= '') {
                        Return this.Errors.Contact_Info_invalid= '';
                    }
                Break;
                }
            }
            send_data () {
                Let params= new urlsearchparams ();
                params.append ('Text', 'test');
                AXIOS.POST ([URL],
PARAMS
                //{
                //'FIRST_NAME': this.first_name,
                //'LAST_NAME': this.last_name,
                //'email_address': THIS.EMAIL_ADDRESS,
                //'contact_info': this.contact_info,
                //}
                ) .Then (Function (Response) {
                    Console.log ('res');
                    console.log (Response.Data)
                }). Catch (Error= >
{
                    console.log (Error.data);
                })
            }
        }
    }
≪
/Script >
≪
Style Lang= "SCSS" Scoped >
.text-red {
    Color: Red;
}
≪
/STYLE >

mail.php Receive PHP file

<
? PHP
Echo "hello";
? ≫

config.NUXT.JS

.......
  PLUGINS: [
   {src: '~ /plugins /axios.js', Mode: 'Client'}
  ],
  AXIOS: {
    Proxy: True,
  }
  Proxy: {
    '/send_email': {target: 'http: //localhost: 3000', pathrewrite: {'^ /vendor /phpMailer': '/'}}
  }
......

AXIOS.JS

AXIOS.JS ok the AXIOS's external access authority

Export Default Function ({$ AxIOS, Redirect}) {
    $ AXIOS.SETTOKEN ('ACCESS_TOKEN')
    $ AXIOS.ONRESPONSE (CONFIG= >
 {
        $ AXIOS.SETHEADER ('Access-Control-Allow-Origin', 'http: //localhost: 3000')
    })
    $ AxIOS.Onerror (Error= >
 {
        IF (Error.Response.Status=== 500) {
            redirect ('/404')
        }
    })
    $ AXIOS.SETHEADER ('Content-Type', 'application /X-www-form-Urlencoded', [
        'Post'
    ])
}

result of Response.Data

<
! DOCTYPE HTML >
≪
HTML >
  ≪
HEAD >
    ≪
Title >
Ashitamo <
/Title >
≪
META DATA-N-HEAD= "1" Charset= "UTF-8" >
≪
META DATA-N-HEAD= "1" NAME= "Viewport" Content= "Width= Device-Width, Initial-Scale= 1" >
≪
META DATA-N-HEAD= "1" DATA-HID= "Description" name= "Description" Content= "for test NUST JS" >
≪
LINK DATA-N-HEAD= "1" REL= "ICON" TYPE= "Image /X-ICON" HREF= "/Favicon.ICO" >
≪
LINK REL= "Preload" HREF= "/_ NUXT /RUNTIME.JS" AS= "Script" >
≪
Link Rel= "Preload" HREF= "/_ NUXT /COMMONS.APP.JS" AS= "Script" >
≪
LINK REL= "Preload" HREF= "/_ NUXT /VENDORS.APP.JS" AS= "Script" >
≪
LINK REL= "Preload" HREF= "/_ NUXT /APP.JS" AS= "Script" >
≪
Link Rel= "Preload" HREF= "/_ NUXT /App.117AE7E03DF8C389B7A6.HOT-Update.js" AS= "Script" >
  ≪
/HEAD >
  ≪
BODY >
    ≪
DIV ID= "__ NUXT" >
≪
Style ># Nuxt-loading {visibility: hidden; Opacity: 0; position: absolute; Left: 0; right: 0; Top: 0; bottom: 0; display: Flex; justify-content: center; align-items: center; Flex -direction: column; animation: nuxtLoadingIn 10s ease; -webkit-animation: nuxtLoadingIn 10s ease; animation-fill-mode: forwards; overflow: hidden;} @ keyframes nuxtLoadingIn {0% {visibility: hidden; opacity: 0;} 20 % {Visibility: Visible; OPACity: 0;} 100% {Visibility: Visible; OPACity: 1;}} @ -Webkit-keyframes NUXTLOADINGIN {0% {Visibility: Hidden; OPACity: 0;} 20% {Visibility: Visible; OPACITY: 0;} 100% {Visibility: Visible; OPACity: 1;}} # nuxt-loading > div, # nuxt-loading >
div: after {border-radius: 50%; Width: 5rem; Height: 5rem;} # NUXT-LOADING >
div {font-size: 10px; position: relative; text-indent: -9999EM; Border: .5RELID # F5F5F5; BORDER-LEFT: .5REM SOLID #FFF; -Webkit-transform: translatez (0); -ms-Transform: TranslateZ (0); Transform: Translatez (0); -Webkit-Animation: NuxtLoading 1.1s Infinite Linear; Animation: NuxtLoading 1.1s Infinite linear;} # NUXT-Loading.Error >
div {border-left: .5rem solid # ff4500; animation-duration: 5s;} @ -webkit-keyframes nuxtloading {0% {-webkit-transform: rotate (0deg); Transform: ROTATE (0 DEG);} 100% { -Webkit-Transform: ROTATE (360DEG); Transform: ROTATE (360DEG);}} @ keyframes NUXTLOADING {0% {-webkit-transform: ROTATE (0 DEG); Transform: ROTATE (0 DEG);} 100% {-Webkit-Transform: ROTATE (360DEG); Transform: ROTATE (360 DEG);} <
/STYLE >
≪
Script >
Window.AddEventListener ('Error', Function () {VAR E= Document.GetElementByID ('NUXT-LOADING'); IF (E) {E. ClassName += 'Error';}}); <
/Script >
≪
DIV ID= "NUXT-LOADING" ARIA-LIVE= "Polite" Role= "Status" >
≪
DIV >
Loading ... <
/DIV >
≪
/DIV >
≪
/DIV >
  ≪
script type= "text /javaScript" src= "/_ nuxt /runtime.js" >
≪
/Script >
≪
script type= "text /javaScript" src= "/_ nuxt /communs.app.js" >
≪
/Script >
≪
Script type= "text /javascript" src= "/_ nuxt /vendors.app.js" >
≪
/Script >
≪
script type= "text /javaScript" src= "/_ nuxt /app.js" >
≪
/Script >
≪
/Body >
≪
/HTML >


					
				
								
				
				
	
  • Answer # 1

    I was able to resolve

    HTML statement came back, it was because the same NUXT moved and REQUEST has been to the environment's server, that is, because there was no URL.

    $ AXIOS. When $ POST, CORS error that does not enclose the data with JSON.STRINGIFY (), and there was already addicted.