技術標籤：react代理配置前端reactproxy代理模式

React腳手架設定代理配置

如果porxy只代理一個，可直接更改package.json檔案

增加"proxy": "http://192.168.10.99:8086"即可

...
"eslintConfig": {
    "extends": "react-app"
  },
 "proxy": "http://192.168.10.99:8086",
 "browserslist"
 
: {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
...

此時使用Axios.post等請求方式時，直接將"http://192.168.10.99:8086"刪除即可,無論是路由還是元件都不需更改其他操作

//Axios.get("http://192.168.10.99:8086/ChatRecord/getConsultingChatRecords)
Axios.get("/
 
ChatRecord/getConsultingChatRecords)
	.then((res) => {
		console.log(res)
	)}

如果porxy代理多個，需在專案中安裝http-proxy-middleware

1.使用npm安裝依賴

npm i  http-proxy-middleware -d

2.在專案src中新建一個js檔案，命名為setupProxy.js
3.在檔案中加入以下程式碼

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function
 
 (app) {
    app.use("/api",
        createProxyMiddleware({
            target: 'http://192.168.10.99:8086',
            changeOrigin: true,
            pathRewrite: {
                "^/api": ""
            }
        })
    );
    app.use("/apc",
        createProxyMiddleware({
            target: 'http://192.168.10.99:8088',
            changeOrigin: true,
            pathRewrite: {
                "^/apc": ""
            }
        })
    )
}

4.請求時，將代理網址更改為/api或/apc等即可正常訪問

Axios.get("/api/ChatRecord/getConsultingChatRecords)
	.then((res) => {
		console.log(res)
	)}

5.在控制檯可以看到雖然顯示的是訪問locolhost，但是已經可以正常返回資料

• 如果沒有安裝http-proxy-middleware時，在package檔案中配置proxy代理多個時，會出現報錯
  如果在操作過程中介面沒有反應時，需重啟專案，全部設定完畢之後重啟即可