logo头像

Edward.K Thinking

解決json檔案放在Azure Storage導致發生CORS

把前端的一些靜態檔案像是cssjs…之類的放到 Azure Storage,然後,讓網站去參照 Storage 路徑下載靜態檔案,基本上這樣並無太大問題,不過,做多國語系時候,使用到i18n這個套件,裡面會利用translation.json檔案做多國語系,誰知道這樣使用下卻發生了這個錯誤訊息

CORS not enabled or no matching rule found for this request

通常遇到這問題,我們會去web.config去設定 CORS 的屬性,來避開這錯誤,不過,針對這個檔案似乎無效,它依然出現這樣錯誤資訊

因此,發現在 Storage 有一個設定,叫做CORS,看名字就知道顧名思義,因該是針對 CORS 進行處理,進入這個設定功能後,我們只要設定好 CORS 規範,基本上就可以解決 CORS 問題(基本上因該是連 Web.config 都可以不用設定)

設定 CORS Rule


設定這規範其實很簡單的,它是針對每個 Host Name 去做設定,只要按下 Add,就可以看到旁邊設定畫面

看到這畫面要怎樣設定呢,其實最簡單方法就是利用F12取得原本失敗檔案的 Header 資訊,分別填入就可以,參考資訊如下圖藍色框的欄位

  • Allowed Origins=Origin
  • Allowed Verbs=Access-Control-Request-Method
  • Allowed Headers=x-requested-with
  • Exposed Headers=x-requested-with

透過以上對應關係,只要把資訊放入就可以,若是要更進階一點,針對Allowed Header & Exposed Headers,若是要包括更多的資訊,可以用星號省略後面的資訊,只要符合前面字樣就可以,設定會像是這樣x-requested*,只要是x-requested開頭的,都是符合這規則。

這樣設定完畢後,就輕鬆解決 CORS 問題了

上一篇