Vue js 发布请求表单 | Vue.js 2答案

【问题标题】：Vue js post request form | vue js 2Vue js 发布请求表单 | Vue.js 2
【发布时间】：2021-01-28 17:29:01
【问题描述】：

我正在尝试使用 axios 发布我的表单。但它不起作用（我无法将数据获取到我的后端）。很抱歉我是 vue js 的新手。

这就是我正在做的：

模板：

<b-form @submit.prevent="create" method="post">

            <b-form-group>
                <b-col sm="1">
                    <label :for="`type-text`">Title:</label>
                </b-col>
                <b-col sm="9">
                    <b-form-input :id="`type-text`" :type="text" v-model="article.title" required></b-form-input>
                </b-col>
            </b-form-group>

            <b-form-group>
                <b-col sm="1">
                    <label for="textarea-no-auto-shrink">Content:</label>
                </b-col>
                <b-col sm="9">
                    <b-form-textarea id="textarea-no-auto-shrink" placeholder="write something..." v-model="article.content" required rows="3" max-rows="3"></b-form-textarea>
                </b-col>
            </b-form-group>

            <b-form-group>
                <b-col sm="1">
                </b-col>
                <b-button type="submit" class="mt-2 ml-3">Submit</b-button>
            </b-form-group>

        </b-form>

脚本

import axios from 'axios'
export default {
    name: 'List',
    props: {},

    data() {
        return {
            articles: [],
            article: {
                title: '',
                content: '',
            }
        }
    },

    mounted() {
        axios
            .get('http://127.0.0.1:8000/api/')
            .then(response => (this.articles = response.data))
            .catch(error => console.log(error))
    },

    methods: {
        create() {
                axios
                    .post('http://127.0.0.1:8000/api/',
                        this.article
                    )
                    .then(response => {
                        this.$router.push('/home');
                        return response;
                    })
                    .catch(error => console.log(error))
        }
    },
}
</script>

错误：

加载资源失败：服务器响应状态为403 （禁止）

【问题讨论】：

标签： node.js vue.js axios

【解决方案1】：

我认为您的后端无法识别您用于发布请求的端点。也许您想点击“http://127.0.0.1:8000/api/posts”之类的内容？

另外，axios 的有效载荷应该是具有键值对的对象

 axios
                .post('http://127.0.0.1:8000/api/posts',
                    {article: this.article}
                )
                .then(response => {
                    this.$router.push('/home');
                    return response;
                })
                .catch(error => console.log(error))

【讨论】：

HTTP 200 OK 允许：GET、POST、HEAD、OPTIONS 内容类型：application/json 变化：接受
确保您已启用 .htaccess

【解决方案2】：

我现在在我的项目中使用 Vue.js 和 Node.js。我将向您展示我的发布请求。它工作正常。后端的架构是Model,Route,Controller

这是前端的post请求：

 handleSubmit() {
      const create = {
        name: this.name,
        description: this.description,
        imageUrl: this.imageUrl,
      };
      axios
        .post("http://localhost:3000/api/category", create)
        .then((res) => {
          console.log(create);
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

这是后端的 post 请求处理：

exports.storeCategory = async function (req, res) {
  const createCategory = new category({
    name: req.body.name,
    description: req.body.description,
    imageUrl: req.body.imageUrl,
  });

  try {
    const savecategory = await createategory.save();

    res.send(create);
  } catch (err) {
    res.send(err);
  }
};

【讨论】：

【解决方案3】：

我在您的 axios 请求中看到您没有指定正确的 URL 来发布您刚刚在 api http://127.0.0.1:8000/api/ 上停止的请求，因此请指定正确的后端 URL 以接收该请求，例如 http://127.0.0.1:8000/api/posts

        create() {
            axios
                .post('http://127.0.0.1:8000/api/posts',
                    this.article
                )
                .then(response => {
                    this.$router.push('/home');
                    return response;
                })
                .catch(error => console.log(error))
    }

【讨论】：