从来源 'https://www.reddit.com' 获取 <my-google-cloud-function> 的访问已被阻止...CORS

Question

我正在开发 Google Chrome 扩展，以根据 [=38= 中的某些后端计算机视觉运行阻止用户 Reddit 提要中帖子中的部分图像] 在 Google 云存储中。 Python 代码采用单个参数（Reddit 中图像的 URL），它通过以下方式传入 JavaScript：

const api_url = https://<my-google-chrome-url>

var curUrl = $(this).attr("src")
fetch(api_url,{
  method: 'POST',
  body: JSON.stringify(curUrl),
  headers: {
    'Content-Type': 'application/json'
    },
  })
  .then(data => {console.log(data)})

当扩展的代码运行s 时，我在控制台中得到以下信息：从来源 'https://www.reddit.com' 在 'https://this-is-the-path-to-my-google-cloud-function' 获取的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin' header 出现在所请求的资源上。如果不透明响应满足您的需求，请将请求的模式设置为 'no-cors' 以在禁用 CORS 的情况下获取资源。

我尝试了多种解决方案，列举如下：

我已按照说明 here 进行操作，因此通过使用 Google 的 gsutil，我能够确认以下内容对于我的函数所在的存储桶是正确的在：[{"maxAgeSeconds": 3600, "method": ["GET", "POST"], "origin": ["https://www.reddit.com"], "responseHeader": ["Content-Type"]}]。我也试过以 ["*"] 作为我的来源，但无济于事。
我也试过在我的 fetch 中使用，mode: no-cors 但没有成功。

如有任何建议或解决方案，我们将不胜感激！

Answer 1

对于你所说的，这种情况下的 CORS 错误似乎来自 Cloud Function。

为了解决这个问题，您应该为 Cloud Function 而不是 Cloud Storage 配置 CORS。

CORS由预检请求和主请求组成。在您的函数中，您应该通过检查请求的方法是否为 OPTION 来检查预检请求，如果是，则响应适当的 headers。这是一个示例：

def cors_enabled_function(request):
    # For more information about CORS and CORS preflight requests, see
    # https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
    # for more information.

    # Set CORS headers for the preflight request
    if request.method == 'OPTIONS':
        # Allows GET requests from any origin with the Content-Type
        # header and caches preflight response for an 3600s
        headers = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET',
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Max-Age': '3600'
        }

        return ('', 204, headers)

    # Set CORS headers for the main request
    headers = {
        'Access-Control-Allow-Origin': '*'
    }

    return ('Hello World!', 200, headers)

更多信息，您可以阅读docs

从来源 'https://www.reddit.com' 获取 <my-google-cloud-function> 的访问已被阻止...CORS

Access to fetch at <my-google-cloud-function> from origin 'https://www.reddit.com' has been blocked ... CORS

javascript

google-chrome-extension

cors

gsutil

google-cloud-functions