Javascript 获取at<；我的谷歌云功能>；来自原点'；https://www.reddit.com' 已被阻止。。。科尔斯

我正在开发一个Google Chrome扩展来阻止用户Reddit提要中帖子中的一部分图像，该提要基于在Google云存储中用Python运行的一些后端计算机视觉。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)})

const-api\u-url=https://
var curUrl=$（this.attr（“src”）
获取（api_url{
方法：“POST”，
正文：JSON.stringify（curUrl），
标题：{
“内容类型”：“应用程序/json”
},
})
.then（数据=>{console.log（数据）}）

当扩展的代码运行时，我会在控制台中看到以下内容： 在'https://this-is-the-path-to-my-google-cloud-function“起源”https://www.reddit.com'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在'access control Allow Origin'标头。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源

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

我已经按照说明进行了操作，因此通过使用Google的

gsutil

，我能够确认我的函数所在的bucket的以下内容是正确的：

[{“maxagesonds”：3600，“method”：[“GET”，“POST”]，“origin”：[”https://www.reddit.com“]，“responseHeader”：[“内容类型”]}]

。我也尝试过将

[“*”]

作为我的来源，但没有成功

我还尝试在获取中使用，

模式：no cors

，但没有成功

---

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

正如您所提到的，本例中的CORS错误似乎来自云函数

为了解决这个问题，您应该为云功能而不是云存储配置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)

---

有关更多信息，您可以阅读

是否允许CORS？

对飞行前的响应

。。。包括处理

选项

飞行前请求感谢根据我运行的gsutil命令对@Jaromanda X的注释，应该按照上面的#1进行配置。我需要对我的Python代码或其他代码进行额外的权限吗？请阅读该页面中的飞行前信息。。。特别是第3点、第5点和第6点，现代Chrome不允许内容脚本中的跨源请求，因此在后台脚本中也不允许跨源请求。要在后台脚本中发出跨源请求，只需将URL添加到

权限

，并按原样使用

获取

或

XMLHttpRequest

，无需任何技巧，请参阅