背景

在瀏覽器中訪問本地靜態資源html網頁時，可能會遇到跨域問題如圖。

是因為瀏覽器預設啟用了同源策略，即只允許載入與當前網頁具有相同源（協議、功能變數名稱和埠）的內容。

WebView2預設情況下啟用了瀏覽器的同源策略，即只允許載入與主機相同源的內容。所以如果我們把靜態資源發佈到iis或者通過node進行啟動就可以看到不跨域了。

解決方案

1. 使用CORS（Cross-Origin Resource Sharing）：如果你有控制伺服器端，可以在伺服器端配置CORS來允許跨域請求。在伺服器端的響應頭中添加相關的CORS頭部信息，例如允許訪問的功能變數名稱、請求方法等，以允許JavaScript跨域訪問。

2. 使用WebView2的 AddWebResourceRequestedFilter 方法：通過添加Web資源請求過濾器，你可以攔截WebView2控制項中載入的資源請求，併進行處理。在攔截到JavaScript文件請求時，修改響應頭部信息，添加Access-Control-Allow-Origin頭部來解決跨域問題。
3. 使用代理伺服器：你可以在本地啟動一個代理伺服器，將WebView2控制項的請求轉發到代理伺服器上，然後代理伺服器再將請求發送到原始伺服器並返迴響應。在代理伺服器上你可以設置合適的CORS頭部信息來解決跨域問題。

思路

1. 首先，確保你已經安裝了Microsoft.Web.WebView2。你可以在Visual Studio的NuGet包管理器中搜索並安裝此包。

2. 然後通過HttpListener進行文件夾的靜態資源進行代理髮布
3. 然後通過webview2進行導航訪問即可我們會發現跨域問題已經解決

   

    

代碼

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Net;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WinApp.View
{
    public partial class Cors : Form
    {
        // 創建HttpListener對象並指定綁定的埠
        HttpListener _listener;
        string _folderPath;
        string _rootDirectory;

        public Cors()
        {
            InitializeComponent();

            // 初始化
            InitializeAsync();
        }

        private async void InitializeAsync()
        {
            // 獲取本地靜態資源的路徑             
            _rootDirectory = AppDomain.CurrentDomain.BaseDirectory + "offline-exam-player"; //設置本地離線播放器為代理服務
            _rootDirectory = @"C:\Users\admin\Documents\WeChat Files\wxid_1ofgk575ybpt22\FileStorage\File\2024-02\ng-alain8\ng-alain8/";
            _folderPath = @"C:\Users\admin\Documents\WeChat Files\wxid_1ofgk575ybpt22\FileStorage\File\2024-02\ng-alain8\ng-alain8/index.html";

            _listener = new HttpListener();
            // 設置代理伺服器的監聽地址和埠號
            _listener.Prefixes.Add("http://localhost:8080/");
            _listener.Start();

            // 啟動代理伺服器
            Task.Run(() =>
            {
                // 啟動代理伺服器
                ProcessRequests();
            });

            // 停止代理伺服器(這裡演示就不停止了)
            //server.Stop();
        }

        private void ProcessRequests()
        {
            try
            {
                while (_listener.IsListening)
                {
                    HttpListenerContext context = _listener.GetContext();
                    string requestPath = context.Request.Url.AbsolutePath;
                    string filePath = _rootDirectory + requestPath;

                    // Serve the requested file if it exists
                    if (System.IO.File.Exists(filePath))
                    {
                        string extension = System.IO.Path.GetExtension(filePath);
                        string contentType;
                        switch (extension)
                        {
                            case ".html":
                                contentType = "text/html";
                                break;
                            case ".js":
                                contentType = "application/javascript";
                                break;
                            case ".less":
                            case ".css":
                                contentType = "text/css";
                                break;
                            case ".svg":
                                contentType = "image/svg+xml";
                                break;
                            default:
                                contentType = "application/octet-stream";
                                break;
                        }

                        context.Response.ContentType = contentType;
                        //context.Response.ContentType = "text/html";
                        byte[] responseBuffer = System.IO.File.ReadAllBytes(filePath);
                        context.Response.OutputStream.Write(responseBuffer, 0, responseBuffer.Length);
                        context.Response.Close();
                    }
                    else
                    {
                        // Return a 404 response if the file does not exist
                        context.Response.StatusCode = 404;
                        context.Response.Close();
                    }
                }
            }
            catch (Exception ex)
            {
                // Handle any exceptions that may occur
                Console.WriteLine(ex.ToString());
            }
        }


        private async void Cors_Load(object sender, EventArgs e)
        {
            //本地靜態資源，直接訪問會出現跨院，如果通過iis訪問則不會跨域；

            // 確保CoreWebView2運行時已準備就緒
            await webView21.EnsureCoreWebView2Async();

            // 在WebView2控制項中載入URL
            //webView21.CoreWebView2.Navigate(_folderPath);            
            webView21.CoreWebView2.Navigate("http://localhost:8080/" + "index.html");
        }

    }
}

結語

最後如果對於不多的跨域js文件,可以把js的代碼內嵌到index.html頁面實現。就是<script>跨域js內容</script>