基本思路是使用代理,參考nginx.conf檔案的代理路徑,在src目錄下建立setupProxy.js,内容如下
const proxy = require("http-proxy-middleware"); //引入http-proxy-middleware,react腳手架已經安裝
module.exports = function(app) {
app.use(
proxy.createProxyMiddleware("/api", {
//遇見/api1字首的請求,就會觸發該代理配置
target: "http://localhost:8080", //請求轉發給誰
changeOrigin: true, //控制伺服器收到的請求頭中Host的值
//pathRewrite: { "^/api": "" }, //重寫請求路徑,下面有示例解釋
}),
proxy.createProxyMiddleware("/oauth2", {
target: "http://localhost:8080",
changeOrigin: true,
//pathRewrite: { "^/oauth2": "" },
}),
proxy.createProxyMiddleware("/login", {
target: "http://localhost:8080",
changeOrigin: true,
//pathRewrite: { "^/login": "" },
}),
);
};
重新啟動,通路http://localhost:3000/user/login,即可