[Note] webpack5 problem: local server CORS


Posted by urlun0404 on 2022-11-09

先記錄一下遇到的問題


因為是用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...)
  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


#frontend #Webpack #problem #cors #API







Related Posts

【單元測試的藝術】Chap 3: 透過虛設常式解決依賴問題

【單元測試的藝術】Chap 3: 透過虛設常式解決依賴問題

演習課 WEEK14 (部屬)

演習課 WEEK14 (部屬)

CSS 生成藝術初探與 css-doodle 簡介

CSS 生成藝術初探與 css-doodle 簡介


Comments