我是Vuejs&戈兰。当我从vue-axios调用api时，试图发送授权令牌thorough头时，我遇到了以下错误。
访问位于"的XMLHttpRequesthttp://localhost:5000/greet/hello'来自原点'http://localhost:5500'已被CORS策略阻止：飞行前响应中的访问控制允许标头不允许请求标头字段授权。
[事实上，我在另一个项目中遇到了错误。但为了理解解决方案，我在下面的简单项目中实现了这一点。所以任何人都可以在最后测试代码并提供解决方案]
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);
});
},
}
})
基本上，在发送Authorization标头时不允许使用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,
}))
您也可以使用AllowOriginFunccors。为动态逻辑配置属性(如果您希望支持多个域(。
注意AllowOrigin属性如何包含vue项目的域。显然，你可以允许更多的头，但这里列出的是你以前使用默认配置允许的头