Gin

package main

import (
   "github.com/gin-gonic/gin"
   "log"
   "net/http"
)

func main() {
   log.SetFlags(log.LstdFlags | log.Lshortfile)
   App := gin.Default()
   app.Use(cors) //這是設置中間件，其目的是響應跨站請求
   app.GET("/api", func(c *gin.Context) {
      view(c)
      c.JSON(200, gin.H{"code": 201}) //根據返回的code值區別不同的請求，201是GET
   })
   app.POST("/api", func(c *gin.Context) {
      view(c)
      c.JSON(200, gin.H{"code": 202}) //根據返回的code值區別不同的請求，202是POST
   })
   app.PUT("/api", func(c *gin.Context) {
      view(c)
      c.JSON(200, gin.H{"code": 203}) //根據返回的code值區別不同的請求，203是PUT
   })
   app.DELETE("/api", func(c *gin.Context) {
      view(c)
      c.JSON(200, gin.H{"code": 204}) //根據返回的code值區別不同的請求，204是DELETE
   })
   _ = app.Run("0.0.0.0:8888")
}

func view(c *gin.Context) {
   _ = c.Request.ParseForm() //解析form數據
   values1 := c.Request.Form //獲取到get、post的數據
   log.Println(values1)
   values2 := c.Request.PostForm //只獲取到post數據
   log.Println(values2)
}

func cors(c *gin.Context) {
   // Access-Control-Allow-Origin，標識允許哪個域的請求，*代表所有的域請求
   c.Header("Access-Control-Allow-Origin", "*")
   // 響應首部 Access-Control-Allow-Methods 在對 preflight request.（預檢請求）的應答中明確了客戶端所要訪問的資源允許使用的方法或方法列表。
   // 例如Access-Control-Allow-Methods: POST, GET, OPTIONS，使用*代表所有
   c.Header("Access-Control-Allow-Methods", "*")
   // 響應OPTIONS請求
   if c.Request.Method == "OPTIONS" {
      c.JSON(http.StatusOK, nil)
   }
}

Vue3

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
  <hr>
<!--  測試GET請求-->
  <button class="btn btn-primary btn-block" @click="test11">jqueryGET</button>
  <!--  測試POST請求-->
  <button class="btn btn-primary btn-block" @click="test12">jqueryPOST</button>
  <!--  測試PUT請求-->
  <button class="btn btn-primary btn-block" @click="test13">jqueryPUT</button>.
  <!--  測試DELETE請求-->
  <button class="btn btn-primary btn-block" @click="test14">jqueryDELETE</button>
  <hr>
</template>
<script>
import $ from "jquery" //引入jquery

export default {
  name: 'AboutView',
  components: {},
  methods: {
    test11() {
      //通過ajax發送GET請求
      $.ajax({
            url: "http://172.16.0.251:8888/api",
            type: "GET",
            data: {"id": "101"},
            success: result => {
              console.log(result);
            }
          }
      )
    },
    test12() {
      //通過ajax發送post請求
      $.ajax({
            url: "http://172.16.0.251:8888/api",
            type: "POST",
            data: {"username": "zhangsan", "password": "123456"},
            success: result => {
              console.log(result);
            }
          }
      )
    },
    test13() {
      //通過ajax發送put請求
      $.ajax({
            url: "http://172.16.0.251:8888/api?id=101",
            type: "PUT",
            data: {"username": "zhangsan", "password": "56789"},
            success: result => {
              console.log(result);
            }
          }
      )
    },
    test14() {
      //通過ajax發送delete請求
      $.ajax({
            url: "http://172.16.0.251:8888/api",
            type: "DELETE",
            data: {"id": "101"},
            success: result => {
              console.log(result);
            }
          }
      )
    },
  }
}
</script>

效果

發送請求

結果響應

狀態顯示