Блог

Главная - Вопросы по программированию - Vue Golang : Доступ к XMLHttpRequest по адресу [Apiurl] из источника заблокирован политикой CORS: Авторизация поля заголовка запроса не разрешена

Vue Golang : Доступ к XMLHttpRequest по адресу [Apiurl] из источника заблокирован политикой CORS: Авторизация поля заголовка запроса не разрешена

# #vue.js #go #cors #web-development-server #go-gin

Вопрос:

Я новичок в Vuejs amp; golang. Я получил следующую ошибку, когда пытаюсь отправить заголовок токена авторизации в заголовке при вызове api из vue axios.

Доступ к XMLHttpRequest по адресу ‘http://localhost:5000/greet/hello» от происхождения «http://localhost:5500» заблокировано политикой CORS: Авторизация поля заголовка запроса не разрешена заголовками «Управление доступом-Разрешить» в предполетном ответе.

[На самом деле я получил ошибку в своем другом проекте. но чтобы понять решение, я реализую это в следующем простом проекте. Таким образом, любой может протестировать код в своем конце и предоставить решение]

Приложение.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(amp;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);
        });
    },
  }
})

Ответ №1:

В принципе, вам не разрешается иметь 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.Свойство конфигурации для динамической логики (в случае, если вы хотите поддерживать несколько доменов).

Обратите внимание, как AllowOrigin свойство содержит домен вашего проекта vue. Очевидно, что вы можете разрешить больше заголовков, но перечисленные здесь-это те, которые вы разрешали ранее, используя конфигурацию по умолчанию

Метки: