Question

我有一个在S3上运行的VueJS应用，该应用由在AWS Elastic Beastalk上运行的基于Flask的API提供服务。

问题

发出 some 请求时，我得到以下信息：

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实例，并为每个CORS(myblueprint)路由文件使用.py（每个蓝图都有一个），同样没有成功。

奇怪的是，我确实在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

据我所知，您是从Vue.js托管S3应用程序的。

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

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

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

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

Answer 2

每当遇到某些请求但没有其他请求的消息“不存在'Access-Control-Allow-Origin'标头” 消息时，请使用“网络”窗格在浏览器devtools中检查响应的HTTP状态代码。

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

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

因此，无论如何，您想要做的是，查看服务器端的服务器日志（对于您向其发送请求的服务器），并查看服务器正在记录的消息，以了解引起问题的原因导致服务器最终发送4xx或5xx错误响应。

某些请求出现“没有'Access-Control-Allow-Origin'标头”错误

2 个答案: