As a newcomer to Vuejs and golang, I encountered an issue when attempting to send an Authorization token through the header while making an API call from Vue Axios.
The error message that was displayed is as follows: "Access to XMLHttpRequest at 'http://localhost:5000/greet/hello' from origin 'http://localhost:5500' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response."
[Although the actual error occurred in another project, I replicated it in a simple demo project for ease of understanding and troubleshooting purposes. Feel free to test the code on your end and provide a solution if possible.]
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);
});
},
}
})