响应标头中的 Azure 无服务器功能启用 CORS

Posted 2023-03-04

【中文标题】响应标头中的 Azure 无服务器功能启用 CORS

【英文标题】：Azure Serverless Function-Enabling CORS in response headers

【发布时间】：2017-11-17 14:34:11

【问题描述】：

我在 Azure 上有一个无服务器函数，用 javascript 编写，返回一些 html 和前端 JS。 JS 应该访问远程托管的 blob 文件。现在，它向我抛出了 CORS 错误。即使我在标题中添加了 Access-Control-Allow-Origin：

headers: 
                        'Content-Type': 'text/html',
                        'Access-Control-Allow-Origin': '*'
                        'Access-Control-Allow-Origin': 'https://tif.azurewebsites.net',
                        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
                        'Access-Control-Allow-Credentials':'true',
                        'Access-Control-Allow-Headers': 'X-Requested-With,content-type',
                        'Access-Control-Allow-Headers' : 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers' 
                      

Content-Type 标头完美运行。

我在这里做错了什么？

【问题讨论】：

您是否在 Blob 存储上设置了 CORS 设置？由于 JS 是从 Blob Storage 访问 Blob，我相信您需要为 Storage 设置 CORS。

谢谢，伙计，这很有道理。我应该为“允许的标题”和“暴露的标题”添加什么？

对于“允许的标头”和“公开的标头”，请继续使用 *。

做到了！如果您添加为答案，我会接受。

更正-适用于 Edge，但在 Chrome 上它仍然给我以下错误：XMLHttpRequest cannot load atpblob.blob.core.windows.net/imagedata/…。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'tif.azurewebsites.net'。

【参考方案1】：

正如 cmets 中所讨论的，由于您的 JS 代码正在访问 Blob 存储，因此您需要为 Blob 存储配置 CORS 设置。配置 CORS 设置时，请确保所有设置正确。设置稍有不匹配会导致存储服务返回 403 错误。

根据您的环境，以下是我的建议：

允许的来源：https://tif.azurewebsites.net

允许的方法：选择所有方法。

允许的标题：*

公开的标头：*