跨域请求被阻止 Microsoft Azure 功能答案

【问题标题】：Cross-Origin Request Blocked Microsoft Azure Function跨域请求被阻止 Microsoft Azure 功能
【发布时间】：2018-07-08 07:00:06
【问题描述】：

当尝试从我的客户端调用远程 Azure 函数时，我收到此错误（URL 被审查）：

跨源请求被阻止：同源策略不允许读取位于https://x.x.com 的远程资源（原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

出于测试目的，我已将门户中的 CORS 允许来源设置为 *，如下所示：

这是我的客户端代码：

$.get({
    url: "https://x.x.com",
    crossDomain: true,
    data: {
        weight: weight,
        height: height
    },
    success: function (data) {
        console.log(data);
        alert(data);
    },
    error: function(xhr) {
        console.log("Error");
    }
    });

谁能指出我正确的方向？非常感谢。

【问题讨论】：

尝试使用代理查看您的问题是否已解决。只需以这种方式更改您的网址：cors-proxy.htmldriven.com/?url={your_url}（只需将括号替换为您的网址），然后看看会发生什么
您尝试访问哪种类型的 Azure 资源？有些允许您通过门户启用 CORS。
我试过 David，它似乎工作正常，只是我没有看到任何输出，就像我直接访问它时那样。 Rory，我只是想从我的客户端访问 Azure Function App，我已按照我的原始帖子在门户中启用了 CORS。
你试过换浏览器吗？我注意到，例如 Edge 倾向于以某种方式缓存 CORS 响应......
是的，我试过不同的浏览器，同样的问题。

标签： javascript jquery azure cors azure-functions

【解决方案1】：

截至 2019 年 1 月，@Founder 的回答对我不起作用 - Azure 删除了我尝试在代码中手动添加的所有 CORS 标头。我必须使用 CORS 设置模块添加所需的来源。我可以看到 Op 在他的问题中引用了这个模块，但我花了一段时间才找到它的位置。最终在 Function Apps 中找到它，单击您的 Function 应用名称，转到 Platform features 选项卡，然后在右侧的 API 下找到 CORS。不知道为什么它对 Op 不起作用，但是在此处添加我的起源对我来说在添加代码时不起作用。

我确实在某处读到禁用此设置将允许在代码中手动添加 CORS 标头工作，但该设置默认启用，我看不到任何禁用它的方法（它有 3 个 Azure 域）默认，也许删除那些会禁用它...）

【讨论】：

以防其他人遇到此问题。您可以删除其显示的来源并添加 *.将允许完全访问，我建议您在开发完成后将其删除。

【解决方案2】：

我必须在响应中添加来源才能使其正常工作。

当我返回我调用的响应时

return Response.CreateResponse(req, HttpStatusCode.OK, result);


public static HttpResponseMessage CreateResponse<T>(HttpRequestMessage req, HttpStatusCode statusCode, T result)
    {
        var response = req.CreateResponse(statusCode, result);
        if (req.Headers.Contains("Origin"))
        {
            var origin = req.Headers.GetValues("Origin").FirstOrDefault();
            response.Headers.Add("Access-Control-Allow-Credentials", "true");
            response.Headers.Add("Access-Control-Allow-Origin", origin);
            response.Headers.Add("Access-Control-Allow-Methods", req.Method +  ", OPTIONS");
        }
        return response;
    }

【讨论】：