關於fetch調用本地資源問題


需求

在開發企業微信工具時,需要對企業微信服務商后台管理的快速登錄方式進行適配,仔細觀察后發現實現方式如下:

從上圖可以看到,web端需要與本地客戶端進行通信(本地客戶端會在程序運行后啟動端口或為50000的服務,具體端口視端口占用情況而定),實現快速登錄;
該工具是采用Blazor Server技術棧去實現,當然不能由服務端去調用127.0.0.1,畢竟客戶端不可能是在服務器下登錄,所以使用IJSRuntime進行js調用,js使用fetch調用127.0.0.1模擬實現該過程;

問題

本地調試過程中可以正常調用,且瀏覽器並出現任何報錯,但是在將工具部署到服務端后,進行登錄操作時,瀏覽器提示了如下錯誤:

Access to fetch at 'http://127.0.0.1:50000/checkLoginState' from origin 'http://wecom.memoyu.com' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local.

分析

后來經過一通搜索,發現問題出在chrome的跨域規則上,原文在此:chrome 更新跨域規則,將對網站造成影響
簡單的說,chrome在v94之后(包括其內核)根據專用網絡訪問的規范更新了跨域規則,目的時為了防止網站對本地服務進行攻擊,也就說限制了對非公共IP地址的訪問;

解決

多種解決方案可查看上述原文:chrome 更新跨域規則,將對網站造成影響,這里主要例舉兩種方案:

  1. 可以在 chrome (Edge同理)瀏覽器地址欄輸入 chrome://flags/#block-insecure-private-network-requests ,回車后將該項值設為 disabled,但這預計會在 chrome v101 失效;
  2. 把當前需要訪問本地數據的頁面升級為https;

第一種肯定是不可取的,每台需要使用的電腦都需要去進行相關設置,繁瑣,且后期會徹底失效;故選擇第二種方式,將工具服務域名升級為https即可;

擴展

相關項目:WeComLoad 工具


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM