React 避開CORS後端設置問題

使用React開發網頁時, 必定遇上Cross-Origin Resource Sharing (CORS) 問題. 除非網頁不需存取伺服器(後端)資料. 解決CORS問題,直觀方法就是設定好後端伺服器(http header). 但網頁本來設計就是存取同網域的資料, 只是開發時需要跨域存取資料. 更甚在無法設定後端伺服器時. 可以使用Proxy來避開CORS問題.

跨域定義

例子: https://odahk.com:8080/
   通訊協定（protocol）: https 或 http
   網域（domain）: odahk.com
   通訊埠（port）: 8080

通訊協定（protocol）, 網域（domain）、或通訊埠（port）其中一樣不同都定義為跨域.

安裝http-proxy-middleware

npm i http-proxy-middleware

在src資料夾下建立setupProxy.js檔案

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', 
    createProxyMiddleware({
      target: 'https://192.168.0.2', //注意沒有api在這裡
      changeOrigin: true,
    })
  );
};

Proxy server 把遊覽器請求(http://localhost:3000/api) 轉向到https://192.168.0.2/api

參考網站:

DAY06 – API串接常見問題 – CORS – 解決CORS問題篇

React 新手村 – 填坑記 – Day11 開發問題(七)

React 使用 Proxy 代理（create-react-app）