

dbを使わず静的サイトを構築をしています。  
お問い合わせフォームを作りたいのですが、本番環境はftpサーバなので、node mailerは使えません。  
そこでphpmailerを使うことにして、nuxtjs のaxiosでやり取りをしようとしたのですが、  
npm run devの環境では何とかエラーなしでrequestを送れているものの、responseがhtmlコードが戻ってきてしまいます。  
npm run generate を叩いて静的サイトを構築してから試したら,undefinedが戻ってきてしまいます。

* * *

要は↓  
*xampp環境でのphpにnuxtからhttp requestを送ってメール送信はxamppからの環境でphpに行ってもらいresponseをnuxtjsに戻したいという考え方です。

*phpファイルはローカルでnuxtが起動しているサーバと別にローカルでのxampp環境で起動されています

> index.vue (axiosを送ろうととしているvue)
[code]

    <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">お問い合わせ</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">
                                氏
                            </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="佐藤">
                                <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">
                                名
                            </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="本田">
                                <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">
                                        メールアドレス
                                    </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="example@example.com">
                                        <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">
                                        メールアドレス
                                    </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="ご用意を自由に書いてください。。。"
                                        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:'お問い合わせ｜わかば会計事務所',
                }
            },
            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 = '氏は必修項目です';
                    }
    
                    if(this.last_name == ''){
                        return this.errors.last_name_invalid = '名は必修項目です';
                    }
    
                    if(this.email_address == ''){
                        return this.errors.email_address_invalid = 'メールアドレスは必修項目です';
                    }
    
                    if(this.contact_info == ''){
                        return this.errors.contact_info_invalid = '要件も入力してください。';
                    }
    
                    //もし全部が入力されたら
                    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>
    
[/code]

> mail.php 受け取るphpファイル
[code]

    <?php 
    echo "hello";
    
    ?>
    
[/code]

> config.nuxt.js
[code]

    .......
      plugins: [
       { src: '~/plugins/axios.js', mode: 'client'}
      ],
      axios: {
        proxy: true,
      },
      proxy:{
        '/send_email' : {target: 'http://localhost:3000', pathRewrite: {'^/vendor/phpmailer': '/'}}
      },
    ......
    
[/code]

> axios.js

axios.jsではaxiosの外部アクセス権限をオッケーにしています

[code]

    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'
        ])
    }
    
[/code]

> response.data の結果
[code]

    <!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: .5rem solid #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(0deg);  }  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);  }}@keyframes nuxtLoading {  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);  }  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);  }}</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/commons.app.js"></script><script type="text/javascript" src="/_nuxt/vendors.app.js"></script><script type="text/javascript" src="/_nuxt/app.js"></script></body>
    </html>
    
[/code]


CC BY-SA 4.0
2020-01-28T09:43:19.647
62609
2021-04-04T00:53:52.977
2021-04-04T00:53:52.977
32986
37618
question
php vue.js nuxt.js axios
nuxt js で他のフレームワークを使わず、phpmailer でメール送信したい、静的サイトを出力もしたい


**解決できました**

html文が帰ってきてしまうのは同じnuxtが動いて環境のサーバにrequestが行ってしまっているからでした、つまりurlがあってなかったからでした。

$axios.$postするときJSON.stringify()でデータを囲んで上げないCORSエラーが出てそこでもう一段階ハマりました。


CC BY-SA 4.0
2020-01-30T02:34:54.137
62649
2020-01-30T02:34:54.137
37618
62609
answer