Vue + Golang：CORS 策略已阻止从源访问 [Apiurl] 处的 XMLHttpRequest：不允许请求 header 字段授权

Question

我是 Vuejs 和 golang 的初学者。我在从 vue axios 调用 api 时尝试通过 header 发送授权令牌时出现以下错误。

CORS 策略已阻止从源 'http://localhost:5500' 访问 'http://localhost:5000/greet/hello' 处的 XMLHttpRequest：预检响应中的 Access-Control-Allow-Headers 不允许请求 header 字段授权。

[实际上我在另一个项目中出错了。但为了理解解决方案，我在简单的以下项目中实现了这一点。所以任何人都可以在他们的最后测试代码并提供解决方案]

App.go

package main

import (
    "fmt"

    "github.com/gin-contrib/cors"
    "github.com/gin-gonic/gin"
)

func main() {
    router := gin.Default()
    router.Use(cors.Default())
    router.Use(Authenticate())

    v1 := router.Group("/greet")
    {
        v1.POST("/hello", handleFunc)
    }
    router.Run(":5000")
}

func handleFunc(c *gin.Context) {
    var student struct {
        Name string `json:"name"`
    }

    if c.BindJSON(&student) != nil {
        c.JSON(400, gin.H{"message": "Provide required details."})
        c.Abort()
        return
    }

    message := fmt.Sprintf("%s%s", "Good Morning ", student.Name)

    c.JSON(200, gin.H{"message": message})
}

func Authenticate() gin.HandlerFunc {

    return func(c *gin.Context) {

        requiredToken := c.Request.Header["Authorization"]

        if len(requiredToken) == 0 {
            c.JSON(400, gin.H{"message": "No token found"})
            c.Abort()
            return
        }

        fmt.Println(requiredToken)

        c.Next()
    }
}

index.html

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
    </head>
    <body>
        <div id="app" class="container m-5">
            <p>{{name}}</p>
            <input type="text" class="form-control col-3" placeholder="Enter Name" v-model="name"/><br>
            <button @click="onButtonClick" class="btn btn-info">CALL API</button>
        </div>
        <script src="index.js"></script>
    </body>
</html>

index.js

var app = new Vue({
  el: '#app',
  data: {
    name: ""
  },
  methods: {
    onButtonClick() {
      axios
        .post("http://localhost:5000/greet/hello",
          {
            Name: this.name
          },
          {
            headers: {
              Authorization: "HEY"
            }
          })
        .then((response) => {
          if (response.status == 200) {
            alert(response.data.message);
          }
        })
        .catch((error) => {
          console.log(error);
          alert(error.response.data.message);
        });
    },
  }
})

Answer 1

基本上在发送授权 header 时不允许 Allowed-Origin: * 所以你必须指定允许的域，你可以通过更改 CORS 中间件而不是使用默认 router.Use(cors.Default())

你可以使用这样的东西

router.Use(cors.New(cors.Config{
    AllowOrigins:     []string{"http://localhost:5500"},
    AllowMethods:     []string{"GET", "POST", "PUT", "PATCH", "DELETE", "HEAD"},
    AllowHeaders:     []string{"Origin", "Content-Length", "Content-Type", "Authorization"},
    ExposeHeaders:    []string{"Content-Length"},
    AllowCredentials: true,
    MaxAge: 12 * time.Hour,
}))

您还可以使用 AllowOriginFunc cors.Config 属性作为动态逻辑（如果您想支持多个域）。

注意 AllowOrigin 属性如何包含您的 vue 项目的域。显然，您可以允许更多 header，但此处列出的是您之前使用默认配置允许的

Vue + Golang：CORS 策略已阻止从源访问 [Apiurl] 处的 XMLHttpRequest：不允许请求 header 字段授权

Vue + Golang : Access to XMLHttpRequest at [Apiurl] from origin has been blocked by CORS policy: Request header field authorization is not allowed

go

web-development-server

cors

vue.js

go-gin