[Note] webpack5 problem: local server CORS

先記錄一下遇到的問題

因為是用local server接第三方API(Pexels API)，網路上有些解法不太適用或者無法解決我遇到的狀況，例如：

1. 請後端改成開放local server可以跨域請求（不適用）
2. 瀏覽器增加可跨域的擴充功能，如Chrome商店的Allow CORS: Access-Control-Allow-Origin（無法解決）

3. fetch 增加 mode: 'no-cors'（無法解決）

   fetch(/* api endpoint */, {
    headers: {
   
    }
   })
   

   
   

後來想了一下，之前用 create-react-app 做的專案可以接同一支API， create-react-app 專案預設也是用webpack在管理，我是自己用webpack從頭開始建立專案，也許可以從webpack開始下手？

修改webpack config

有看了官方文件、一些issues和stackoverflow的解法，最後是在這篇問答找到答案：

1. 官方文件 - devServer（以下都無法處理，反而還打不開server...）
   • https: true
   • server: 'https'
2. 修改headers（無法解決）

   devServer: {
   // ...
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    }
   }
   

3. 最後是修改這位網友的解法，把 portocol: http 改成 portocol: https 終於暫時處理掉這個問題😭

   // Solution from gyss
   devServer: {
    // ...
   // Send API requests on localhost to API server get around CORS.
   proxy: {
      '/api': {
         target: {
            host: "0.0.0.0",
            protocol: 'http:',
            port: 8080
         },
         pathRewrite: {
            '^/api': ''
         }
      }
   }
   },
   

   
   

References
webpack dev server CORS issue