React專案npm run start啟動本地服務後瀏覽器訪問http://localhost:3000

start命令也可自定義port指定本地執行埠（eg: PORT=3002）

對於單點登入關聯的站點，通過DNS伺服器指向，繫結域名和IP，此時專案訪問不能使用localhost或計算機IP地址，需要使用域名訪問，通過一些軟體配置host（eg:127.0.0.1app.web.com）此時本地環境就可以訪問http://app.web.com:3002。

對於閘道器對映的服務地址，也需要配置對應的host完成本地環境的介面請求、資料互動。

現在流行微服務，在一個專案中會出現訪問請求多個伺服器，http-proxy-middleware這個外掛就能幫助我們實現業務需求。

http-proxy-middleware外掛用於設定代理，轉發請求給其他伺服器，解決前端的跨域請求

外掛安裝：npm install--save-devhttp-proxy-middleware

使用：

src目錄下新建setupProxy.js：

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

module.exports = function (app) {

//將/userapi相關介面代理轉發target對應的伺服器上

//相當於請求了http://appuser.web.com/userapi

app.use('/userapi', createProxyMiddleware({

target: 'http://appuser.web.com',

changeOrigin:true,//預設為false,是否改變原始主機頭為目標url

ws:true,//是否代理websockets

pathRewrite: {//重寫path地址

'^/api/aaa': '/api/bbb'//將請求的/api/aaa重寫解析到/api/bbb

},

router: {// 用於重寫目標伺服器

//當請求的host為172.14.14.102時重寫目標伺服器為後面的地址

'172.14.14.102': 'http://appuser.webapi.com'

}

}))

//可以配置任意數量的轉發，代理不同的介面和伺服器

app.use('/adminapi',createProxyMiddleware({

target:'http://appadmin.web.com',

changeOrigin:true,//預設為false,是否改變原始主機頭為目標url

ws:true,//是否代理websockets

pathRewrite: {//重寫path地址

'^/api/ccc': '/api/ddd'//將請求的/api/ccc重寫解析到/api/ddd

},

router: {// 用於重寫目標伺服器

//當請求的host為172.14.14.102時重寫目標伺服器為後面的地址

'172.14.14.102': 'http://appadmin.webapi.com'

}

}))

}

createProxyMiddleware這裡是省略了第一個引數，表示匹配的路徑，省略時表示匹配任何路徑

createProxyMiddleware('/', {})、createProxyMiddleware({})、

createProxyMiddleware('**', {})都表示匹配任何路徑，轉發所有請求

也支援陣列，函式等多種形式，陣列表示匹配多個路徑

createProxyMiddleware(['/api', '/data'], {})

還可以使用萬用字元來進行匹配

createProxyMiddleware('**/*.html', {})任何以.html結尾的請求

createProxyMiddleware('/userapi/*.html', {})userapi下所有以.html結尾的請求

createProxyMiddleware('!**/*.json', {})非!符號表示排除任何以.json結尾的請求

http-proxy-middleware原理是對nodejs的http-proxy庫作了一層封裝，支援http-proxy的option中的選項配置