EP07 | React 18 全家桶複習 - React-Router (反向代理 proxy)

發表於 更新於 分類於 ， ，

跨域(CORS)

跨域的定義: 因為瀏覽器的安全策略，非同源的數據不能直接訪問，必須協議、域名、端口號都必須相同才叫同源。

更多請參考: 跨來源資源共用（CORS）

通常解決方式: 後端解決、JSONP(只能處理 GET 請求)、反向代理。

透過反向代理來解決跨域

  1. 下載第三方套件解決跨域問題 npm install http-proxy-middleware --save。
  2. 在 /src 下新建一個 setupProxy.js 儲存代理伺服器的設定。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    // '/api' 代表在請求時，是以 /api 開頭的話，就會啟動以下設定的代理伺服器
    // 如 fetch('/api/breeds/list/all') => 在實際發請求時就會變成請求 https://dog.ceo/api/breeds/list/all
    '/api',
    createProxyMiddleware({
      // target 是目標伺服器的位址
      // https://dog.ceo假設有跨域問題
      target: 'https://dog.ceo',
      changeOrigin: true,
    })
  );

  // 假設有另一個會跨域的請求
  app.use(
    '/ajax',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};
  1. 每次改完 setupProxy.js 都必須重啟服務器 npm start 。