“不存在'Access-Control-Allow-Origin'标头”对于某些请求但不是其他请求的错误

Question

我有一个在 S3 上运行的 VueJS 应用程序，它由在 AWS Elastic Beastalk 上运行的 Flask 驱动的 API 提供服务。

问题

当发出 一些 请求时，我得到以下信息：

Access to XMLHttpRequest at 'https://api.myflaskapi.net/blueprint/get_info?date=2019-01-01' from origin 'https://app.myvuejsapp.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

到目前为止我做了什么

在我的__init__.py 文件中，由Flask 中的应用程序工厂初始化，我将CORS(app, support_credentials=True) 设置为this link 上的示例。有了这个，我希望基本上任何请求都有 CORS 标题，所以我不会有任何策略阻止我的前端请求。

理想的情况是只允许来自https://app.myvuejsapp.net 的请求，所以我尝试使用CORS(app, support_credentials=True, origins=['https://app.myvuejsapp.net'])，但也没有成功。

我还尝试使用CORS(myblueprint) 为每个.py 路由文件为我的每个蓝图创建一个CORS 实例（每个蓝图都有一个），但也没有成功。

奇怪的是，我在 Vue 上确实有一个功能，它在应用程序为 mounted 时运行，效果很好。我看不出这个和其他不起作用的功能有什么区别。

工作函数示例（从后端返回true 或false）：

      checkDB() {
        const path = this.base_url + 'blueprint/check_db'
        axios.get(path, this.token)
          .then(checkupd => {
            this.isupdated = Boolean(checkupd.data);
            if (this.isupdated == true) {
              this.update_msg = "Database up to date."
              this.loading = false
              this.finished = true
            } else {
              this.update_msg = "WARNING: Check DB status."
            }
          })
          .catch(error => {
            console.log(error)
          })
      },

非工作函数示例（从后端返回 XLS）：

      getSalesFrom(file) {
        const fs = require('fs')
        const FileDownload = require('js-file-download');
        const path = this.base_url + `blueprint/get_sales?date=${this.date}`
        axios.get(path, {
            headers: 
              {
                "X-Access-Token": "mytoken",
                "Content-Type": "application/json"
              },
            responseType: 'blob'
          })
          .then(response => {
            const content = response.headers['content-type'];
            download(response.data, 'text.xlsx', content)
          })
          .catch(error => {
            console.log(error)
          })
        this.export_dialog = false
      }

S3 CORS 配置 XML

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>Content-Length</AllowedHeader>
    <AllowedHeader>Access-Control-Allow-Origin</AllowedHeader>
    <AllowedHeader>X-Access-Token</AllowedHeader>
</CORSRule>
</CORSConfiguration>

关于我可能做错了什么有什么想法吗？ 我已经阅读了一段时间，但似乎无法找到解决这个看似非常简单的问题的方法......也许我应该弄乱 S3 存储桶权限配置？

谢谢。

Answer 1

当您遇到“没有 'Access-Control-Allow-Origin' 标头存在”的情况时，对于某些请求而不是其他请求，请使用“网络”窗格在浏览器开发工具中检查响应的 HTTP 状态代码。

在这些情况下，您几乎总是会发现 HTTP 状态代码是 4xx 或 5xx 错误，而不是预期的 200 OK 成功响应。

您看到 “No 'Access-Control-Allow-Origin' header is present” 消息的唯一原因是，Access-Control-Allow-Origin 标头通常不存在将被添加到 4xx 和 5xx 错误中。部分原因是，特别是在 5xx 的情况下，原因可能是在服务器开始运行您的应用程序代码之前发生的服务器故障。除此之外，默认情况下，大多数服务器不会将应用程序集响应标头添加到 4xx 和 5xx 错误；而默认情况下，它们只将它们添加到 2xx 成功响应中。

因此，无论如何，您要做的是查看服务器端的服务器日志（对于您发送请求的服务器），并查看服务器正在记录哪些消息，说明问题的原因这使得服务器最终发送 4xx 或 5xx 错误响应。

Answer 2

据我了解，您从S3 托管您的Vue.js 应用程序。

您需要在 S3 存储桶中包含 CORS 标头。没有它们，浏览器将阻止对您的 Flask 应用程序的所有请求。您正在从app.myvuejsapp.net 向api.myflaskapi.net 发出请求，因此您需要在app.myvuejsapp.net 中配置CORS。

您可以阅读文档如何在S3 here 和here 中设置CORS。

要配置您的存储桶以允许跨域请求，您需要创建一个 CORS 配置，它是一个 XML 文档，其中包含用于识别您将允许访问您的存储桶的来源的规则、将支持的操作（HTTP 方法）每个来源，以及其他特定于操作的信息。

您最多可以向配置中添加 100 条规则。您可以通过编程方式或使用 Amazon S3 控制台将 XML 文档作为 cors 子资源添加到存储桶。如需更多信息，请参阅Enabling Cross-Origin Resource Sharing (CORS)。