WebUI3中的WebView2：如何禁用CORS以获取请求？

Question

我有一个简单的Web应用程序，我想在Winui应用程序中运行，该应用程序可以获取外部HTML内容：

    private async fetchHtml() {
        const url = document.querySelector<HTMLInputElement>("#txt-url")!.value;
        const html = await fetch(url).then(r => r.text());
        document.querySelector<HTMLTextAreaElement>("#txt-html")!.value = html;
    }

显然，这会遇到CORS错误。我想禁用它，但找不到winui3的任何方法：

• this Answer 无济于事。

• The URL is external URL so SetVirtualHostNameToFolderMapping suggested by

• 我尝试注入自己的CORS标头，但它在 fetch 上不起作用（ webresourceresponsereceived 事件仅在 fetch 请求上不触发事件）：

c.WebResourceResponseReceived += (_, e) =>
{
    var origin = e.Request.Headers.FirstOrDefault(q => q.Key == "Origin").Value;
    if (!string.IsNullOrEmpty(origin))
    {
        e.Response.Headers.AppendHeader("Access-Control-Allow-Origin",
            new Uri(e.Request.Uri).GetLeftPart(UriPartial.Authority));
        e.Response.Headers.AppendHeader("Access-Control-Allow-Methods", "*");
        e.Response.Headers.AppendHeader("Access-Control-Allow-Headers", "*");
    }
};

Answer 1

因此，事实证明，您实际上需要在 Webresourcerequested 事件中处理代理请求。 webresourceresponsereceived 是在浏览器处理请求之后触发。

要手动代理请求，您需要首先设置a Web资源请求的过滤器。

// CoreWebView2WebResourceContext.XmlHttpRequest is triggered
// by fetches for some reason. This filter will listen for any URI.
this.webView.CoreWebView2.AddWebResourceRequestedFilter("*", CoreWebView2WebResourceContext.XmlHttpRequest);

然后，您可以像 webresourceresponsereceived 一样设置侦听器

this.webView.CoreWebView2.WebResourceRequested += this.CoreWebView2_WebResourceRequested;

，因此要代理请求，您需要设置 httpclient 并手动处理请求。

例如，这将代表所有请求，假设 httpclient 定义为 httpclient ：

private void CoreWebView2_WebResourceRequested(object sender, CoreWebView2WebResourceRequestedEventArgs e)
{
    HttpRequestMessage request = new(new HttpMethod(e.Request.Method), e.Request.Uri)
    {
        Content = new StreamContent(e.Request.Content)
    };

    foreach (KeyValuePair<string, string> header in e.Request.Headers)
    {
        // Copy base headers
        request.Headers.TryAddWithoutValidation(header.Key, header.Value);

        // Copy content headers
        request.Content.Headers.TryAddWithoutValidation(header.Key, header.Value);
    }

    // Make the request
    HttpResponseMessage response = httpClient.Send(request);

    // Custom headers
    response.Headers.Add("Access-Control-Allow-Origin", "*");

    // Webview2 Response expecting headers in a string with following format:
    //   key: value
    //   header2: value
    List<string> headers = response.Headers.Select(h => $"{h.Key}: {string.Join(",", h.Value)}").ToList();

    // Create Webview2 response
    CoreWebView2WebResourceResponse webView2WebResourceResponse = this.webView.CoreWebView2.Environment.CreateWebResourceResponse(
        response.Content.ReadAsStream(),
        (int)response.StatusCode,
        response.ReasonPhrase,
        string.Join('\n', headers));

    e.Response = webView2WebResourceResponse;
}

注意

在构建响应对象时，请勿使用 async 方法。 COM层不尊重线程。