概述

講述完關於 API 的管理後，這裡要繼續實作完整的 GET POST 功能，前幾天是 GET，今天則是會記錄 POST 的使用，但沒想到這次又遇到建置坑了，這一系列的 Side Project 可能無法如期在 30 天內畫下完美的句點，因此會持續更新。

POST 實作

在前端 Vue 中，會需要變數是儲存要傳給後端的內容，除此之外，也要有一個 POST 的呼叫，而在頁面呈現上會需要有請使用者輸入的 input 框，大致會有以上元素。
程式碼如下:

<script>
import axios from "axios";
import { postGet } from "../api.js";
import {ref} from "vue";


export default {
  setup() {
    let success = false;
    let error = false;
    let postList= [];
    const postObj = ref({
      title:null,
      content:null,
      description:null
    });
    function onSuccess(msg) {
      success = true;
    };

    function onFailure(msg) {
      error = true;
    };

    function storeContact() {
      axios.post('http://localhost:8080/api/posts', Object.values(postObj.value))
        .then((res) => {
          success = true
        })
        .catch((error) => {
          console.log(error)
          error = error.data.message
        })
    };

    return {
      success,
      error,
     postObj,
      storeContact
    }
  },

  data() {
            return {
                postList: [],
            };
        },

  async mounted() {
            await this.postRequest()
        },
        methods: {
         
        postRequest() {
              axios.get("http://localhost:8080/api/posts")
                    .then(res => {
                        res = JSON.stringify(res.data)
                        res = JSON.parse(res)
                        this.postList = res.content;
                        console.log(this.postList)
                      
                    })
                    // Manage errors if 
                    .catch(error => {
                        if (error.request.status == 503) {
                            setTimeout(() => {
                                this.postRequest()
                            }, 0.1);
                        }
                    })
            }
          }

}
</script>
<template>
  <h1>Post Test</h1>
  <ul v-for="post in postList" :key="post.id">
    <li >{{ post.description }}
    </li>
  </ul>


  <form @submit.prevent="storeContact">
      <input type="text" placeholder="Title" v-model="title">
      <input type="text" placeholder="Description" v-model="description">
      <input type="text" placeholder="Content" v-model="content">
      <button action="post" type="submit">Submit</button>
    </form>
</template>

<style scoped>
</style>

但在按下 Submit 後，也就是呼叫 POST 傳送資料給後端時，又遇到了 CROSS policy 的問題。

Access to XMLHttpRequest at 'http://localhost:8080/api/posts' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

不過這次在後端的 POST method 中是有加上 header 的註釋設定的，不確定是什麼原因導致在做 POST 請求時被拒絕。

@CrossOrigin(allowedHeaders = {"Authorization", "Origin"})

今天就先記錄到這裡，會再努力找到問題~
後續將會更新未完成的功能~
希望明天能解決這個建置的問題，如果有大神願意相助，或是有問題想要討論的歡迎在底下留言~