只有在回调/异步函数内部时，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 错误：

从源“http://127.0.0.1:8080”访问“http://127.0.0.1:9000/graphql”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

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

为了比较，这里是第一个请求调用的请求标头（有效！）。

我已经将我的 Golang 服务器设置为通过 go-chi/cors 支持 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 插件会为您请求过滤。如果您查看允许的标头列表，您会发现它缺少您尝试在 axios 调用中发送的名为 snb-user-gps-location 的标头。

要么将该标头添加到允许列表中，要么不从前端发送。

Answer 2

我仍然怀疑 go-chi CORS 设置。我建议您手动设置 CORS。这并不难。此页面将获得基本设置：https://flaviocopes.com/golang-enable-cors/

如果这适用于您的嵌套 API 设置，那么我们可以向后确定 go-chi 配置问题。

---

更新：

我还将调查其他中间件步骤 - 注释掉所有非必要的步骤。

中间件处理程序通常检查r *http.Request 或将标头写入w http.ResponseWriter，然后最终处理程序将写入响应正文。但是在整个中间件链中，以下标头/正文写入流程应该看起来像这两个流程之一：

成功：

w.Header().Set(...) // headers
w.Write(...) // body

请注意，上述流程将发出隐式的 http 状态代码写入，以保持标题出现 first 和正文 second：

w.Header().Set(...) // headers
w.WriteHeader(http.StatusOK) // implicit success http status code
w.Write(...) // body

失败：

如果报告运行时错误，流程应该是：

w.Header().Set(...) // headers
w.WriteHeader(http.StatusInternalServerError) // some unrecoverable error 
w.Write(...) // optional body

---

之所以提出这个问题，是因为我看到了 3 种类型的错误，这些错误会扰乱这个流程：

• 错误的中间件处理程序在正文之后写入标头导致客户端混淆
• 调用 http.Error 认为会停止 API 死机 - 而不是在 http.Error 之后立即返回并且确保不会调用后续中间件处理程序
• 两次写入相同的标头。在后续处理程序中重写标头将导致客户端看到最后一个版本（从而破坏任何以前的版本）

因此，为了全面追踪事情，我会 log.Println 为您的 API 写入所有标头/正文，以确保上述流程正确且没有预期值被覆盖。