Create React App 有內建 Proxy，可以在使用 npm start 的時候做使用

使用方法超爆簡單，在 package.json 裡面使用

{
  "proxy": "http://your.proxy.com",",
}

當這樣設定的時候，不論 request 發出什麼東西，最後都會送出到 http://your.proxy.com

request: localhost -> 
proxy: your.proxy.com

可以用在幾種情境

1. 如果 API request 需要 cookie，但是 localhost 又沒辦法收到 API domain set-cookie 的 response（畢竟是向 localhost 的發出 request）。這時候就可以用 proxy

request: localhost
proxy: destination.com

這樣當你在 devtool 上面修改 cookie，即使 在 devtool 上面只能修改 localhost 的 cookie，但因為在向 API request 的時候也是向 localhost 發出 request，所以會帶上 cookie。而這個 cookie 就會經由 proxy 轉 request 到 destination.com 。

2. 另一種情境是（CRA 官網範例），你 server 上 path 長這樣

/             - static server returns index.html with React app
/todos        - static server returns index.html with React app
/api/todos    - server handles any /api/* requests using the backend implementation

這樣你就可以在網站裡面直接呼叫 GET /api/todos 拿到資料了。但是你在開發中就倒大霉了，開發模式中向 /api/todos 發出 request，CRA 的 dev server 只會告訴你 no this page。這時就可以使用 proxy：

request: /api/todos
proxy: http://localhost:4000

然後你可以自己開一個 local 的 API server 但是 port 改成 4000，或者是用 ssh tunnel 把 server 的 domain 對應到 localhost（雖然有點多此一舉，直接 proxy 就好）。就不會在開發中發生問題，然後在 production 的時候又不用改資料

3. 這種跨網域的問題最大宗就是 CORS 了，CORS 問題源自於 AJAX 的 domain 和網站的 domain 不同，而瀏覽器會擋住不同 domain 又沒有 Access-Control-Allow-Origin header 的 reaponse。我們可以用同樣的 domain，但是再用 proxy 導出去，方法其實和 1. 相同，但 1. 是為了要讓 cookie 同源，這裡則是為了要讓 request 的 domain 同源：

request: localhost
proxy: destination.com

如果你 production 遇到這種問題， 還是需要請你的 backend 開 CORS header。

但最後再提醒一次，這些都只是在開發上有用而已，也就是 npm run start，production 的時候是沒用的。

總歸一句，這個 Proxy 只是 CRA 提供的方便東西，如果需要更複雜的設定：例如在 proxy 加上 header，改變 origin 之類的東西。可以看這裡

• axios 的 proxy