React中用http-proxy-middleware配置代理時報錯:proxy is not a function

React中用http-proxy-middleware配置代理時報錯:proxy is not a function

在配置代理的時候遇到proxy is not a function這個錯誤

程式碼是這樣的

這個時候就要去檢視你的http-proxy-middleware的版本如果是1.x以上的版本就是配置的問題

先說一個React中的配置代理的方式

1.在package.json資料夾中直接配置"proxy": "http://localhost:5000"


這個配置表示當你請求這個伺服器的時候會先取你的本機伺服器發送請求要資源，如果本機(也就是建立專案的public資料夾下)由你請求的資源，那麼就會回傳給你public下的資源；如果沒有則去你配置的哪個地址請求資源，由於是伺服器向伺服器發送請求所以不會存在跨域

2.在src目錄下船艦一個setupProxy.js檔案進行配置

1
2
3
4
5
6
7
8
9
10
11
const {proxy} = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api', {    //只要是介面以 /api1 開頭的都走代理
      target: 'http://localhost:5000',  //要發給哪個伺服器
      changeOrigin: true,  //控制伺服器接收到的請求標頭中的 host 欄位屬性值
      pathRewrite: {'^/api': ''}
    }),
  )
}
  • 這裡的/api是控制哪個請求走代理
  • target是要請求的伺服器
  • changeOrigin是控制伺服器接收到的請求標頭中的 host 欄位屬性值
    • changeOrigin 設定為 true 時接收到的請求標頭中的 host 值為 localhost:5000
    • changeOrigin 設定為 false 時接收到的請求標頭中的 host 值為 localhost:3000
    • 預設是 false
    • 不然伺服器就會知道你這個請求是從哪發過來的，一看是3000那你這個是走的代理啊
  • pathRewrite因為請求的路徑要加上一個 /api1 但是後端的介面中並沒有 /api1 所以要重寫一下 把 /api1 改為 『』
  • 裡面還有很多配置，想要了解可以檢視官方檔案

那麼這個http-proxy-middleware這個東西是哪來的呢

其實在用腳手架建立React專案時，React就棒我們安裝了這個包，重點是這個包的版本是0.19.1也就是1.x以下，我們找到這個包的版本

1.x以下引入是const {proxy} = require('http-proxy-middleware')

由於你手動下載了1.x以上，所以配置要改一下才行,就是把裡面的proxy換成createProxyMiddleware

1
2
3
4
5
6
7
8
9
10
11
const {<!-- -->createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app) {<!-- -->
 app.use(
   createProxyMiddleware('/api', {<!-- -->    
     target: 'http://localhost:5000',  
     changeOrigin: true,  
     pathRewrite: {<!-- -->'^/api': ''}
   }),
 )
}