React項目npm run start啟動本地服務后瀏覽器訪問http://localhost:3000
start命令也可自定義port指定本地運行端口（eg: PORT=3002）
對於單點登錄關聯的站點，通過DNS服務器指向，綁定域名和IP，此時項目訪問不能使用localhost或計算機IP地址，需要使用域名訪問，通過一些軟件配置host（eg: 127.0.0.1 app.web.com）此時本地環境就可以訪問http://app.web.com:3002。
對於網關映射的服務地址，也需要配置對應的host完成本地環境的接口請求、數據交互。
現在流行微服務，在一個項目中會出現訪問請求多個服務器，http-proxy-middleware這個插件就能幫助我們實現業務需求。
http-proxy-middleware插件用於設置代理，轉發請求給其他服務器，解決前端的跨域請求
插件安裝：npm install --save-dev http-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中的選項配置