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

在create-react-app 中配置proxy代理

proxy，預設為NULL，類型為URL，一個為了發送http請求的代理

在平時開發時，尤其前後端分離時，需要假資料來進行模拟請求，這個時候就需要

proxy

代理來處理

create-react-app < 2.0

package.json 中配置

"proxy":{
   "/api/**":{
      "target":"https://easymock.spiritling.pub/",
      "changeOrigin": true
    }
}           

複制

create-react-app > 2.0

package.json 中配置（不推薦）

"proxy": "https://easymock.spiritling.pub/",           

複制

配置檔案

/src/setupProxy.js

（推薦）

将

create-react-app

解包後，可以在

config

檔案夾下找到配置

在

config/path.js

中存在

proxySetup: resolveApp('src/setupProxy.js'),

而

proxySetup

是隻在

webpackDevServer.config.js

檔案中使用，也就是說隻在開發時使用

是以，可以在 /src/setupProxy.js 中配置

首先安裝

http-proxy-middleware

npm install http-proxy-middleware -D           

複制

然後檔案配置

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        '/api/v1/',
        proxy({
            target : 'https://easymock.spiritling.pub/',
            changeOrigin : true,  // 設定跨域請求
            PathRewrite : {
                '^/api/v1' : '' // 将/api/v1 變為 ''
            }
        })
    );
};           

複制

使用例子

01

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        '/api/v1/',
        proxy({
            target : 'https://easymock.spiritling.pub/',
            changeOrigin : true
        })
    );
};           

複制

遊覽器中請求為

https://example.com/api/v1/login

則經過代理後可以轉為

https://easymock.spiritling.pub/api/v1/login

02

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        '/api/v1/',
        proxy({
            target : 'https://easymock.spiritling.pub/',
            changeOrigin : true,
            PathRewrite : {
                '^/api/v1' : ''
            }
        })
    );
};           

複制

遊覽器中請求為

https://example.com/api/v1/login

則經過代理後可以轉為

https://easymock.spiritling.pub/login

create-react-app官方-Proxying API Requests in Development

http-proxy-middleware

新版本 ≧ 1.0.0

在新版本大于等于 1.0.0 時使用會出現如下問題

proxy is not a function           

複制

也就是說

http-proxy-middleware

或者

setupProxy

會出現報錯

proxy is not a function

是以需要使用新版本的寫法才可以

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

module.exports = function (app) {
    app.use(createProxyMiddleware('/api/v1', {
        target : 'https://easymock.spiritling.pub',
        changeOrigin : true,
        ws: true,
        pathRewrite : {
            '^/api/v1' : ''
        },
    }));
};           

複制