c#使用webView2 访问本地静态html资源跨域Cors问题

背景

在浏览器中访问本地静态资源html网页时，可能会遇到跨域问题如图。

 
是因为浏览器默认启用了同源策略，即只允许加载与当前网页具有相同源（协议、域名和端口）的内容。
WebView2默认情况下启用了浏览器的同源策略，即只允许加载与主机相同源的内容。所以如果我们把静态资源发布到iis或者通过node进行启动就可以看到不跨域了。
解决方案

• 使用CORS（Cross-Origin Resource Sharing）：如果你有控制服务器端，可以在服务器端配置CORS来允许跨域请求。在服务器端的响应头中添加相关的CORS头部信息，例如允许访问的域名、请求方法等，以允许JavaScript跨域访问。
  
• 使用WebView2的 AddWebResourceRequestedFilter 方法：通过添加Web资源请求过滤器，你可以拦截WebView2控件中加载的资源请求，并进行处理。在拦截到JavaScript文件请求时，修改响应头部信息，添加Access-Control-Allow-Origin头部来解决跨域问题。
  
• 使用代理服务器：你可以在本地启动一个代理服务器，将WebView2控件的请求转发到代理服务器上，然后代理服务器再将请求发送到原始服务器并返回响应。在代理服务器上你可以设置合适的CORS头部信息来解决跨域问题。
  

思路

• 首先，确保你已经安装了Microsoft.Web.WebView2。你可以在Visual Studio的NuGet包管理器中搜索并安装此包。
  
• 然后通过HttpListener进行文件夹的静态资源进行代理发布
  
• 然后通过webview2进行导航访问即可我们会发现跨域问题已经解决
   
  

代码

 

1. using System;
2. using System.Collections.Generic;
3. using System.ComponentModel;
4. using System.Data;
5. using System.Drawing;
6. using System.Linq;
7. using System.Net;
8. using System.Text;
9. using System.Threading.Tasks;
10. using System.Windows.Forms;
12. namespace WinApp.View
13. {
14.     public partial class Cors : Form
15.     {
16.         // 创建HttpListener对象并指定绑定的端口
17.         HttpListener _listener;
18.         string _folderPath;
19.         string _rootDirectory;
21.         public Cors()
22.         {
23.             InitializeComponent();
25.             // 初始化
26.             InitializeAsync();
27.         }
29.         private async void InitializeAsync()
30.         {
31.             // 获取本地静态资源的路径            
32.             _rootDirectory = AppDomain.CurrentDomain.BaseDirectory + "offline-exam-player"; //设置本地离线播放器为代理服务
33.             _rootDirectory = @"C:\Users\admin\Documents\WeChat Files\wxid_1ofgk575ybpt22\FileStorage\File\2024-02\ng-alain8\ng-alain8/";
34.             _folderPath = @"C:\Users\admin\Documents\WeChat Files\wxid_1ofgk575ybpt22\FileStorage\File\2024-02\ng-alain8\ng-alain8/index.html";
36.             _listener = new HttpListener();
37.             // 设置代理服务器的监听地址和端口号
38.             _listener.Prefixes.Add("http://localhost:8080/");
39.             _listener.Start();
41.             // 启动代理服务器
42.             Task.Run(() =>
43.             {
44.                 // 启动代理服务器
45.                 ProcessRequests();
46.             });
48.             // 停止代理服务器(这里演示就不停止了)
49.             //server.Stop();
50.         }
52.         private void ProcessRequests()
53.         {
54.             try
55.             {
56.                 while (_listener.IsListening)
57.                 {
58.                     HttpListenerContext context = _listener.GetContext();
59.                     string requestPath = context.Request.Url.AbsolutePath;
60.                     string filePath = _rootDirectory + requestPath;
62.                     // Serve the requested file if it exists
63.                     if (System.IO.File.Exists(filePath))
64.                     {
65.                         string extension = System.IO.Path.GetExtension(filePath);
66.                         string contentType;
67.                         switch (extension)
68.                         {
69.                             case ".html":
70.                                 contentType = "text/html";
71.                                 break;
72.                             case ".js":
73.                                 contentType = "application/javascript";
74.                                 break;
75.                             case ".less":
76.                             case ".css":
77.                                 contentType = "text/css";
78.                                 break;
79.                             case ".svg":
80.                                 contentType = "image/svg+xml";
81.                                 break;
82.                             default:
83.                                 contentType = "application/octet-stream";
84.                                 break;
85.                         }
87.                         context.Response.ContentType = contentType;
88.                         //context.Response.ContentType = "text/html";
89.                         byte[] responseBuffer = System.IO.File.ReadAllBytes(filePath);
90.                         context.Response.OutputStream.Write(responseBuffer, 0, responseBuffer.Length);
91.                         context.Response.Close();
92.                     }
93.                     else
94.                     {
95.                         // Return a 404 response if the file does not exist
96.                         context.Response.StatusCode = 404;
97.                         context.Response.Close();
98.                     }
99.                 }
100.             }
101.             catch (Exception ex)
102.             {
103.                 // Handle any exceptions that may occur
104.                 Console.WriteLine(ex.ToString());
105.             }
106.         }
109.         private async void Cors_Load(object sender, EventArgs e)
110.         {
111.             //本地静态资源，直接访问会出现跨院，如果通过iis访问则不会跨域；
113.             // 确保CoreWebView2运行时已准备就绪
114.             await webView21.EnsureCoreWebView2Async();
116.             // 在WebView2控件中加载URL
117.             //webView21.CoreWebView2.Navigate(_folderPath);            
118.             webView21.CoreWebView2.Navigate("http://localhost:8080/" + "index.html");
119.         }
121.     }
122. }

复制代码

 
结语

最后如果对于不多的跨域js文件,可以把js的代码内嵌到index.html页面实现。就是

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！