CORS 标头缺少 Vue API 网关 - Javascript

介绍

当使用 Vue 发起跨域请求时，由于浏览器的安全性限制，经常会出现 CORS（跨域资源共享）问题。CORS 是一种浏览器技术，用于限制跨域请求，以保障网站的安全性。
但是，在 API 网关的情况下，由于 API Gateway 只接受指定来源（Origin）的请求，可能会出现 CORS 错误。

解决方法

使用 Vue 发送请求时，可以设置一个 headers 标头，用于指定请求头的内容，进而解决 CORS 错误。

在 Vue 中配置请求头

在 Vue 的 HTTP 拦截器中，可以设置请求头的内容。以下是一个示例：

axios.interceptors.request.use(config => {
    // 设置路径
    config.url = '/api' + config.url

    // 设置请求头
    config.headers['Content-Type'] = 'application/json;charset=UTF-8'
    config.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080'
    config.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
    config.headers['Access-Control-Allow-Headers'] = 'Content-Type'

    // 返回请求配置
    return config
})

以上代码中，config.headers 即为请求头的配置。其中，Access-Control-Allow-Origin 是必须指定的，否则会出现 CORS 错误。

在 API Gateway 中设置响应头

另外，如果你是在使用 AWS API Gateway，请在其响应模板中添加以下代码：

#set($context.responseOverride.header.Access-Control-Allow-Origin = $input.params().header.get("origin"))
#set($context.responseOverride.header.Access-Control-Allow-Methods = "GET, POST, OPTIONS")
#set($context.responseOverride.header.Access-Control-Allow-Headers = "Content-Type, X-Amz-Date, Authorization, X-Api-Key, X-Amz-Security-Token")

以上代码中，Access-Control-Allow-Origin 的值为 $input.params().header.get("origin")，表示接受来自所有来源的请求。

结论

对于 Vue API 网关 CORS 错误，可以在 Vue 拦截器中设置请求头的内容或在 API Gateway 的响应模板中设置响应头的内容来解决。这些步骤非常简单，但可以大大提高你的代码质量和用户体验。