如何在使用Let’s Encrypt + Nginx 重定向的情況下避免CORS問題？

用Fetch抓取和傳輸資料雖然很方便，也遇上CORS問題的時侯就笑不出來了。查資料加上除錯了一整晚，最後終於知道要如何在API 使用Let’s Encrypt重定向的時侯到底要怎樣避免CORS問題。

首先，要在後端程式加上Access-Control-Allow-Origin的Header。這應該大家都知道了，但還是提醒一下這個是基礎第一步喔。以PHP為例子：

header("Access-Control-Allow-Origin: *");

之後你可能會發現：咦？為什麼我設定了Access-Control-Allow-Origin，還是會出現同樣的問題呢？原因非常簡單：CORS不接受2xx以外的Staus Code回應！

用Fetch POST JSON時，瀏覽器會先發出OPTION的請求。這時Nginx如果不好好處理，就會給出405回應，導致問題發生。

所以我們要在Nginx的設定裡加上這個：

location / {  
    if ($request_method = 'OPTIONS') {
        return 204;
    }
} 

重啟Nginx後就能解決問題了。

順便提醒一下，前端的Code也需要注意在CROS模式下Fetch的時侯不能帶Header，否則一樣會出現問題喔。嚶嚶嚶。

  fetch(apiUrl, {
      body:JSON.stringify({
        width: 500,
        height: 300,
        imageUrl: imgUrl,
      }),
      mode: 'cors',
      method: 'POST',
    })

鳴謝Front-End Developers Taiwan的翁傳翔和林坤南先生指出文中問題！