【Azure Developer】瀏覽器檢視本地資料檔案時遇見跨域問題(CORS)

路边两盏灯發表於2024-06-27
Developer瀏覽器跨域CORS

問題描述

.Net 應用部署到Azure App Service上後，出現5XX錯誤後，透過.Net Profiler Trace工具生成報告檔案(HTML 加 JSON資料檔案），在本地開啟，遇見Access to XMLHttpRequest at 'file:///C:/Users/.../failedrequests.json' from origin 'null' has been blocked by CORS policy 問題

Access to XMLHttpRequest at 'file:///C:/Users/.../failedrequests.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.

reportdata/failedrequests.json:1

Failed to load resource: net::ERR_FAILED

【Azure Developer】瀏覽器檢視本地資料檔案時遇見跨域問題(CORS)

怎麼辦？怎麼辦？

解決辦法

網上尋找到答案，可以禁用瀏覽器本身的跨域校驗來開啟資料檔案。關鍵點在於 “ --disable-web-security ” 引數。Edge 和 Chrome 都是一樣。

## Edge 瀏覽器

msedge.exe --disable-web-security --user-data-dir=<C:\Users\... 本地JSON檔案/HTML資料夾路徑>

## Chrome 瀏覽器

chrome.exe --disable-web-security --user-data-dir=<C:\Users\... 本地JSON檔案/HTML資料夾路徑>

具體操作步驟

1: 找到Edge 及 Chrome 軟體的安裝目錄 ( msedge.exe 或 chrome.exe 檔案所在之Floder）

【Azure Developer】瀏覽器檢視本地資料檔案時遇見跨域問題(CORS)

2：開啟CMD視窗命令，執行--disable-web-security 指令

msedge.exe   --disable-web-security --user-data-dir=<....> 

## 或者

chrome.exe   --disable-web-security --user-data-dir=<....>

3: 第二步執行後，自動開啟瀏覽器視窗，在視窗中輸入本地HTML檔案地址，開啟JSON檔案成功。

【Azure Developer】瀏覽器檢視本地資料檔案時遇見跨域問題(CORS)

瀏覽器本地跨域校驗問題解決！

參考資料

1）https://cloud.tencent.com/developer/article/1744377

2）https://cloud.tencent.com/developer/article/2321850

相關文章