javascript - Axios 请求仅在回调/异步函数内接收 CORS 错误

Question

我正在为我正在构建的应用程序使用 VueJS。我的服务器是用 Golang 编写的，并且已经设置为接受 CORS。在应用程序中，在我的组件之一 searchBar 中，我已将其设置为在创建数据之前获取一些数据。

var searchBar = {
    prop: [...],
    data: function() {
        return { ... };
    },
    beforeCreate: function() {
        var searchBar = this;

        axios.request({
            url: '/graphql',
            method: 'post',
            data: {
                'query': '{courses{id, name}}'
            }
        })
        .then(function(response) {
            searchBar.courses = response.data.data.courses;
        });
    },
    methods: { ... },
    template: `...`
};

Axios 在这里完美运行。它得到我需要的数据。 searchBar 有一个按钮，它会发出一个事件，然后由另一个组件 searchResults 拾取该事件。收到事件后，searchResults 将获取一些数据。

var searchResults = {
    data: function() {
        return { ... }
    },
    mounted: function() {
        var sr = this;

        this.$bus.$on('poll-server', function(payload) {
            var requestData = {
                url: '/graphql',
                method: 'post',
                data: { ... },
                ...
            };
            ...

            axios.request(requestData)
                 .then(function(response) {
                     console.log(response);
                 }
            );
        });
    },
    template: `...`
};

请注意，我的 Axios 请求调用现在位于回调函数中。执行此调用时，我收到 CORS 错误:

Access to XMLHttpRequest at 'http://127.0.0.1:9000/graphql' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我的服务器位于 http://127.0.0.1:9000，客户端位于 http://127.0.0.1:8080。这是第二次请求调用的OPTIONS请求的内容。

为了比较，这里是第一个请求调用的请求 header (有效!)。

我已经通过 go-chi/cors 将我的 Golang 服务器设置为支持 CORS。这就是它的设置方式。

router := chi.NewRouter()
...    
// Enable CORS.
cors := cors.New(cors.Options{
    AllowedOrigins:   []string{"*"},
    AllowedMethods:   []string{"POST", "OPTIONS"},
    AllowedHeaders:   []string{"Accept", "Authorization", "Content-Type", "X-CSRF-Token"},
    ExposedHeaders:   []string{"Link"},
    AllowCredentials: true,
    MaxAge:           300,
})

router.Use(
    render.SetContentType(render.ContentTypeJSON),
    middleware.Logger,
    middleware.DefaultCompress,
    middleware.StripSlashes,
    middleware.Recoverer,
    cors.Handler,
)

router.Post("/graphql", gqlServer.GraphQL())

return router, db

是什么导致了我遇到的错误，如何解决？

Answer 1

此 CORS 错误是预期的。您正在使用的 CORS 插件会为您请求过滤。如果您查看允许的 header 列表，您会发现它缺少您尝试在 axios 调用中发送的名为 snb-user-gps-location 的 header 。

要么将该 header 添加到允许列表，要么不要从前端发送它。