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

Posted 2023-03-29

【中文标题】从源“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

【发布时间】：2021-01-17 20:40:16

【问题描述】：

我正在开发一个 Google Chrome 扩展程序，以根据在 Google Cloud Storage 中以 Python 运行的一些后端计算机视觉来阻止用户 Reddit 提要中帖子中的图像子集。 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))

当扩展程序的代码运行时，我在控制台中得到以下信息： CORS 政策阻止了从源“https://www.reddit.com”获取“https://this-is-the-path-to-my-google-cloud-function”的访问权限：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

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

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

任何建议或解决方案将不胜感激！

【问题讨论】：

<my-google-chrome-url> 是否允许 CORS？

Response to preflight ...包括处理OPTIONS预检请求

感谢@Jaromanda X 的评论根据我运行的gsutil 命令， 应该按照上面的#1 进行配置。我需要对我的 Python 代码或其他代码授予额外的权限吗？

阅读该页面中的预检...特别是第 3、5 和 6 点

现代 Chrome 不允许内容脚本中的跨域请求，因此请在后台脚本中执行。要在后台脚本中发出跨域请求，只需将 URL 添加到 permissions 并按原样使用 fetch 或 XMLHttpRequest，无需任何技巧，请参阅 developer.chrome.com/extensions/xhr

【参考方案1】：

对于您提到的，这种情况下的 CORS 错误似乎来自 Cloud Function。

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

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

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