用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翁傳翔林坤南先生指出文中問題!