«Cannot POST /» в приложении Vue (Gridsome) - Netlify Forms предотвращают перенаправление - PullRequest
Новая
       50

«Cannot POST /» в приложении Vue (Gridsome) - Netlify Forms предотвращают перенаправление

0 голосов
/ 13 апреля 2020

Я создаю персональный сайт с Gridsome. Я пытаюсь настроить форму подписки на рассылку через Netlify Forms. Я не хочу, чтобы пользователь перенаправлялся после нажатия кнопки «Отправить». Чтобы предотвратить это, я использую @submit.prevent, например, так: 

<form name= "add-subscriber" id="myForm" method="post" @submit.prevent="handleFormSubmit" 
data-netlify="true" data-netlify-honeypot="bot-field">
  <input type="hidden" name="form-name" value="add-subscriber" />
  <input type="email" v-model="formData.userEmail" name="user_email" required="" id="id_user_email">
  <button type="submit" name="button">Subscribe</button>
</form>

Затем используйте сочетание следующих руководств ( Gridsome Guide , CSS -Tricks Guide ) В своем сценарии я делаю следующее: 

<script>
import axios from "axios";

export default {
    data() {
        return {
            formData: {},
            }
        },

    methods: {
        encode(data) {
            return Object.keys(data)
            .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
            .join('&')
        },

        handleFormSubmit(e) {
            axios('/', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: this.encode({
                    'form-name': e.target.getAttribute('name'),
                    ...this.formData,
                }),
            })
            .then(() => this.innerHTML = `<div class="form--success">Almost there! Check your inbox for a confirmation e-mail.</div>`)
            .catch(error => alert(error))
        }
    }
}
</script>

Ошибка

Что бы я ни пытался, я не могу понять, как настроить желаемое поведение. Я продолжаю получать следующие ошибки -> Error: Request failed with status code 404 & Cannot POST /

Примечание

Причина, по которой я хочу сделать это таким образом, заключается в том, что после того, как пользователь отправит форму, функция Netlify будет вызывается для отправки email_адреса в EmailOctopus через их API.

Вот как выглядит функция:

созданных представлений. js

import axios from "axios";

exports.handler = async function(event) {
    console.log(event.body)
    const email = JSON.parse(event.body).payload.userEmail
    console.log(`Recieved a submission: ${email}`)

    axios({
        method: 'POST',
        url: `https://emailoctopus.com/api/1.5/lists/contacts`,
        data: {
            "api_key": apikey,
            "email_address":  email,
        },
    })
    .then(response => response.json())
    .then(data => {
        console.log(`Submitted to EmailOctopus:\n ${data}`)
    })
    .catch(function (error) {
        error => ({ statusCode: 422, body: String(error) })
    });
}

Извините за длинный вопрос. Я очень ценю ваше время и вашу помощь. Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

...