对于 Azure 函数 HTTP 触发器，如何设置 CORS 策略“WithExposedHeaders("*")？答案

【问题标题】：For an Azure Function HTTP Trigger how can I set a CORS policy "WithExposedHeaders("*")?对于 Azure 函数 HTTP 触发器，如何设置 CORS 策略“WithExposedHeaders("*")？
【发布时间】：2021-08-08 21:40:30
【问题描述】：

我正在尝试从 Azure 函数 HTTP 触发器获取标头值。

我有一个 Blazor Wasm 客户端。

当我使用客户端时，Headers 集合是空的。

我的 Blazor Wasm 客户端调用 REST API 的代码版本相同。当我设置该版本时，我必须在 Startup.cs 中设置如下代码所示的 CORS 策略。

添加此代码后，我的 Blazor Wasm 客户端会从我的 API 获取标头值。

            services.AddCors(options =>
            {
                options.AddPolicy(StringConstant.AllowedSpecificOrigins,
                    builder =>
                    {
                        builder.WithOrigins(origins)
                            .AllowAnyHeader()
                            .AllowAnyMethod()
                            .WithExposedHeaders("*");
                    });
            });

看起来我必须在 Azure 函数中执行相同的操作，因为 Header 集合在我的 Response 对象中是空的。

知道如何设置吗？

我的 Blazor Wasm 客户端正在使用 httpClient.GetAsync 方法。

【问题讨论】：

你试过setting it in the Azure portal吗？
感谢您的回复。不，我在本地工作。您可以在门户中执行此操作吗？
从上面的链接，是的，您可以在门户中设置 CORS - imgur.com/a/5ic2RRq - 虽然我不确定 WithExposedHeaders 。虽然在本地 - 我不必这样做一段时间 - 可能不会..
嗨，理查德。我和你的情况完全一样。你解决了吗？
@WalterLockhart 不，我从来没有解决这个问题。 In 是一个 PIC 应用程序，所以它并不重要。所以，我真的没有花太多时间在这个问题上。如果您提出解决方案，请告诉我。 TY

标签： c# azure-functions blazor-webassembly

【解决方案1】：

我们可以从 Azure 门户在我们的 Function App 中添加 CORS。

下面是我们可以从 Azure Portal 添加的地方：

如果我们想允许所有来源，请添加 *，否则，我们可以添加 URL，包括它们。

在Portal 和Code 中参考微软关于CORS 的一些相关documentation

【讨论】：

【解决方案2】：

找到了解决方案 - https://stackoverflow.com/a/71080532/9276081，我也在这里粘贴了我的答案 -

问题不在于 Blazor WASM，而是该标头已在您的 API 端公开。在您的 azure 函数中，添加以下内容 -

注意： 即使您没有像下面那样公开标题，Postman 仍会显示标题。那是因为 Postman 并不关心 CORS 标头。 CORS 只是一个浏览器概念，并不是一个强大的安全机制。它允许您限制哪些其他 Web 应用程序可以使用您的后端资源，仅此而已。

首先创建一个启动文件来注入HttpContextAccessor

需要的包：Microsoft.Azure.Functions.Extensions

[assembly: FunctionsStartup(typeof(FuncAppName.Startup))]

namespace FuncAppName
{
    public class Startup : FunctionsStartup
    {
        public override void Configure(IFunctionsHostBuilder builder)
        {
            builder.Services.AddScoped<HttpContextAccessor>();
        }
    }
}

接下来，将它注入你的 main 函数 -

using Microsoft.AspNetCore.Http;
namespace FuncAppName
{
    public class SomeFunction
    {
        private readonly HttpContext _httpContext;
        public SomeFunction(HttpContextAccessor contextAccessor)
        {
             _httpContext = contextAccessor.HttpContext;
        }

        [FunctionName("SomeFunc")]
        public override Task<IActionResult> Run([HttpTrigger(AuthorizationLevel.Anonymous, new[] { "post" }, Route = "run")] HttpRequest req)
        {
            var response = "Some Response"
            _httpContext.Response.Headers.Add("my-custom-header", "some-custom-value");
            _httpContext.Response.Headers.Add("my-other-header", "some-other-value");
            _httpContext.Response.Headers.Add("Access-Control-Expose-Headers", "my-custom-header, my-other-header");
            return new OkObjectResult(response)
        }

如果你想允许所有标题，你可以使用通配符（我认为，未测试）-

_httpContext.Response.Headers.Add("Access-Control-Expose-Headers", "*");

您仍然需要将您的网络应用网址添加到 azure 平台 CORS。您可以在此处添加 * 通配符，更多信息 - https://iotespresso.com/allowing-all-cross-origin-requests-azure-functions/

在开发过程中为本地应用启用 CORS - https://stackoverflow.com/a/60109518/9276081

现在访问 Blazor WASM 中的这些标头，例如你可以 -

protected override async Task OnInitializedAsync()
{
    var content = JsonContent.Create(new { query = "" });
    using (var client = new HttpClient())
    {
        var result = await client.PostAsync("https://func-app-name.azurewebsites.net/api/run", content);
        var headers = result.Headers.ToList();
    }
}

【讨论】：