javascript - Netlify Forms Nuxt JS 错误 - POST https://festive-fermi-f2a8f1.netlify.app/ 404。未捕获（承诺）错误：请求失败，状态码 404

Question

仅供参考，在部署时，表单与应用程序一起在 netlify 中创建，因此该表单应该对爬虫可见。然而，在测试部署的 nuxt 应用程序并提交表单后，我收到了上面提到的 404。

我已经尝试过增量更改，例如在 nuxt.config.js 中更改 ssr: true ，将 netlify 标记添加到开始元素等，但仍然没有运气。

任何帮助将不胜感激。

Contact.vue - 这是我的表单组件，包含所有 html 和方法

<form class="contact-grid" 
    name="contact" 
    method="POST" 
    data-netlify="true"
    data-netlify-honeypot="bot-field" 
    @submit.prevent="handleSubmit"
    >

      <input value="contact" name="form-name" type="hidden" />

      <label class="grid-name">
        <input id="grid-name" type="text" name="name" :placeholder="$t('Name')"
        />
      </label>

      <label class="grid-prezime">
        <input id="grid-prezime" type="text" name="lastName" :placeholder="$t('LastName')"
        />        
      </label>

      <label class="grid-predmet">
        <input id="grid-predmet" type="text" name="subject" :placeholder="$t('Subject')"
        />
      </label>

      <label class="grid-email">
        <input id="grid-email" type="email" name="email" placeholder="Email" 
        />
      </label>

      <label class="grid-komentar">
        <textarea id="grid-komentar" type="text" name="comment" :placeholder="$t('Comment')"
        />
      </label>
      
      <button type="submit" class="grid-submit-btn">{{ $t('Send') }}</button>
    </form>


data() {
    return {
      message: {
        name: "",
        lastName: "",
        subject: "",
        email: "",
        comment: "",
        myFile: undefined
      }
    }
  },
methods: {
   handleSubmit: (event) => {  
        const { name } = Object.fromEntries(new FormData(event.target))
        let message = { name, lastName, subject, email, comment }
        let encoded = Object.keys(message)
        .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(message[key])}`)
        .join("&")
        console.log(encoded);
        const axiosConfig = { 
          header: { "Content-Type": "application/x-www-form-urlencoded" }
        };
        axios.post(
          "/",
          ({
            "form-name": "contact",
            ...encoded
          }),
          axiosConfig
        );   
      }
}

这是 Nuxt 的配置文件。nuxt.config.js

import colors from 'vuetify/es5/util/colors'
import i18n from './config/i18n'
export default {
  target: 'static',
  ssr: false,
  generate: {
    fallback: true
  },
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    // titleTemplate: '%s - app',
    title: 'Gynaecologia et perinatologia',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'description', content: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.', name: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.' },
      { hid: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.', name: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.', content: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [

  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    [
      'nuxt-i18n',      
      {
        vueI18nLoader: true,
        defaultLocale: 'hr',
         locales: [
          {
             code: 'en',
             name: 'Eng',
             iso: 'en-US'
          },
          {
             code: 'hr',
             name: 'Hrv',
             iso: 'hr-HR'
          }
        ],
        vueI18n: i18n
      }
    ],
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
    '@nuxtjs/fontawesome'
  ],
  fontawesome: {
    icons: {
      solid: true,
      brands: true
    }
  },
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    'nuxt-i18n',    
  ],

  i18n: {
    strategy: 'prefix_except_default',
    seo: true,
    i18n: {      
      locales: [
        {
          code: 'en',
          name: 'Eng',
          iso: 'en-US'
       },
       {
          code: 'hr',
          name: 'Hrv',
          iso: 'hr-HR'
       }
      ],
      defaultLocale: 'hr',
      vueI18n: {
        fallbackLocale: 'hr',
        messages: {
          hr: {
            welcome: 'Dobrodošli'
          },
          en: {
            welcome: 'Welcome'
          }
        }
      }
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // baseURL: 'https://gynaecolperinatol.hr/',
    // retry: { retries: 3 }
  },
  // publicRuntimeConfig: {
  //   axios: {
  //     browserBaseURL: 'https://gynaecolperinatol.hr/'
  //   }
  // },

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
  
}

Answer 1

在 nuxt.config.js 中添加 ssr: true 解决了这个问题。