c#使用webView2 訪問本地靜態html資源跨域Cors問題

来源:https://www.cnblogs.com/BFMC/p/18022948
-Advertisement-
Play Games

背景 在瀏覽器中訪問本地靜態資源html網頁時,可能會遇到跨域問題如圖。 是因為瀏覽器預設啟用了同源策略,即只允許載入與當前網頁具有相同源(協議、功能變數名稱和埠)的內容。 WebView2預設情況下啟用了瀏覽器的同源策略,即只允許載入與主機相同源的內容。所以如果我們把靜態資源發佈到iis或者通過node ...


背景

在瀏覽器中訪問本地靜態資源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>

從前慢,車馬慢。 一生只愛一個人。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 通過使用Python編程語言,編寫腳本來自動化Excel和CSV之間的轉換過程,可以批量處理大量文件,定期更新數據,並集成轉換過程到自動化工作流程中。本文將介紹如何使用第三方庫Spire.XLS for Python 實現: 使用Python將Excel轉為CSV 使用Python 將CSV轉為Ex ...
  • 多年不用PageHelper了,最近新入職的公司,採用了此工具集成的框架,作為一個獨立緊急項目開發的基礎。項目開發起來,還是手到擒來的,但是沒想到,最終測試的時候,深深的給我上了一課。 我的項目發生了哪些奇葩現象? 一切的問題都要從我接受的項目開始說起, 在開發這個項目的過程中,發生了各種奇葩的事情 ...
  • OOM 幾乎是筆者工作中遇到的線上 bug 中最常見的,一旦平時正常的頁面線上上出現頁面崩潰或者服務無法調用,查看伺服器日誌後你很可能會看到“Caused by: java.lang.OutOfMlemoryError: Java heap space” 這樣的提示,那麼毫無疑問表示的是 Java ... ...
  • 引入依賴 <dependency> <groupId>com.alibaba.csp</groupId> <artifactId>sentinel-core</artifactId> <version>1.8.7</version> </dependency> 基本用法 try (Entry ent ...
  • 一、程式計數器 程式計數器記憶體很小,可以看作是當前線程所執行位元組碼的行號指示器。 有了它,程式就能被正確的執行。 因為有線程切換的存在,則每個線程必須有各自獨立的程式計數器,即線程私有的記憶體。 這裡再解釋一下什麼是線程切換,線程切換指的是: 單處理器在執行多線程時所進行的線程切換,多線程的交替運行會 ...
  • 常見內置序列類型(Sequence Type) 類型 英文名 對應關鍵字 構造函數 是否可變 列表 list list list() 可變 元組 tuple tuple tuple() 不可變 數字序列:range range range range() 不可變 文本序列:字元串 string st ...
  • 最近看幾個老項目的SQL條件中使用了1=1,想想自己也曾經這樣寫過,略有感觸,特別拿出來說道說道。編寫SQL語句就像炒菜,每一種調料的使用都會影響菜品的最終味道,每一個SQL條件的加入也會影響查詢的執行效率。那麼 1=1 存在什麼樣的問題呢?為什麼又會使用呢? ...
  • Unity 預設可以序列化值類型, Serializable屬性修飾的類型, 派生自UnityEngine.Object的類型, 通常這些類型已經足以供日常使用了. 但是有時我們希望在編輯器面板上序列化一個介面或者抽象類, 則需要用到 SerializeReference屬性. 假定我們有一個介面I ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...