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) //這是設(shè)置中間件，其目的是響應(yīng)跨站請(qǐng)求
   app.GET("/api", func(c *gin.Context) {
      view(c)
      c.JSON(200, gin.H{"code": 201}) //根據(jù)返回的code值區(qū)別不同的請(qǐng)求，201是GET
   })
   app.POST("/api", func(c *gin.Context) {
      view(c)
      c.JSON(200, gin.H{"code": 202}) //根據(jù)返回的code值區(qū)別不同的請(qǐng)求，202是POST
   })
   app.PUT("/api", func(c *gin.Context) {
      view(c)
      c.JSON(200, gin.H{"code": 203}) //根據(jù)返回的code值區(qū)別不同的請(qǐng)求，203是PUT
   })
   app.DELETE("/api", func(c *gin.Context) {
      view(c)
      c.JSON(200, gin.H{"code": 204}) //根據(jù)返回的code值區(qū)別不同的請(qǐng)求，204是DELETE
   })
   _ = app.Run("0.0.0.0:8888")
}

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

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

Vue3

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
  <hr>
<!--  測(cè)試GET請(qǐng)求-->
  <button class="btn btn-primary btn-block" @click="test11">jqueryGET</button>
  <!--  測(cè)試POST請(qǐng)求-->
  <button class="btn btn-primary btn-block" @click="test12">jqueryPOST</button>
  <!--  測(cè)試PUT請(qǐng)求-->
  <button class="btn btn-primary btn-block" @click="test13">jqueryPUT</button>.
  <!--  測(cè)試DELETE請(qǐng)求-->
  <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() {
      //通過(guò)ajax發(fā)送GET請(qǐng)求
      $.ajax({
            url: "http://172.16.0.251:8888/api",
            type: "GET",
            data: {"id": "101"},
            success: result => {
              console.log(result);
            }
          }
      )
    },
    test12() {
      //通過(guò)ajax發(fā)送post請(qǐng)求
      $.ajax({
            url: "http://172.16.0.251:8888/api",
            type: "POST",
            data: {"username": "zhangsan", "password": "123456"},
            success: result => {
              console.log(result);
            }
          }
      )
    },
    test13() {
      //通過(guò)ajax發(fā)送put請(qǐng)求
      $.ajax({
            url: "http://172.16.0.251:8888/api?id=101",
            type: "PUT",
            data: {"username": "zhangsan", "password": "56789"},
            success: result => {
              console.log(result);
            }
          }
      )
    },
    test14() {
      //通過(guò)ajax發(fā)送delete請(qǐng)求
      $.ajax({
            url: "http://172.16.0.251:8888/api",
            type: "DELETE",
            data: {"id": "101"},
            success: result => {
              console.log(result);
            }
          }
      )
    },
  }
}
</script>

效果

發(fā)送請(qǐng)求

結(jié)果響應(yīng)

狀態(tài)顯示