mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-04-02 09:01:07 +08:00
b88d6655eb
* Refactor start script into modules * Move dev server config into config file * Replace eject file whitelist with a "remove-file-on-eject" flag * Move utils into scripts folder (for inclusion in ejection) * Add missed changes * Pass showInstructions as an argument * Fix eject bug * Don't eject babelTransform
98 lines
4.2 KiB
JavaScript
98 lines
4.2 KiB
JavaScript
var chalk = require('chalk');
|
||
var historyApiFallback = require('connect-history-api-fallback');
|
||
var httpProxyMiddleware = require('http-proxy-middleware');
|
||
var paths = require('../../config/paths');
|
||
|
||
// We need to provide a custom onError function for httpProxyMiddleware.
|
||
// It allows us to log custom error messages on the console.
|
||
function onProxyError(proxy) {
|
||
return function(err, req, res){
|
||
var host = req.headers && req.headers.host;
|
||
console.log(
|
||
chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
|
||
' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
|
||
);
|
||
console.log(
|
||
'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
|
||
chalk.cyan(err.code) + ').'
|
||
);
|
||
console.log();
|
||
|
||
// And immediately send the proper error response to the client.
|
||
// Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
|
||
if (res.writeHead && !res.headersSent) {
|
||
res.writeHead(500);
|
||
}
|
||
res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
|
||
host + ' to ' + proxy + ' (' + err.code + ').'
|
||
);
|
||
}
|
||
}
|
||
|
||
module.exports = function addWebpackMiddleware(devServer) {
|
||
// `proxy` lets you to specify a fallback server during development.
|
||
// Every unrecognized request will be forwarded to it.
|
||
var proxy = require(paths.appPackageJson).proxy;
|
||
devServer.use(historyApiFallback({
|
||
// Paths with dots should still use the history fallback.
|
||
// See https://github.com/facebookincubator/create-react-app/issues/387.
|
||
disableDotRule: true,
|
||
// For single page apps, we generally want to fallback to /index.html.
|
||
// However we also want to respect `proxy` for API calls.
|
||
// So if `proxy` is specified, we need to decide which fallback to use.
|
||
// We use a heuristic: if request `accept`s text/html, we pick /index.html.
|
||
// Modern browsers include text/html into `accept` header when navigating.
|
||
// However API calls like `fetch()` won’t generally accept text/html.
|
||
// If this heuristic doesn’t work well for you, don’t use `proxy`.
|
||
htmlAcceptHeaders: proxy ?
|
||
['text/html'] :
|
||
['text/html', '*/*']
|
||
}));
|
||
if (proxy) {
|
||
if (typeof proxy !== 'string') {
|
||
console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
|
||
console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
|
||
console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
|
||
process.exit(1);
|
||
}
|
||
|
||
// Otherwise, if proxy is specified, we will let it handle any request.
|
||
// There are a few exceptions which we won't send to the proxy:
|
||
// - /index.html (served as HTML5 history API fallback)
|
||
// - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
|
||
// - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
|
||
// Tip: use https://jex.im/regulex/ to visualize the regex
|
||
var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
|
||
|
||
// Pass the scope regex both to Express and to the middleware for proxying
|
||
// of both HTTP and WebSockets to work without false positives.
|
||
var hpm = httpProxyMiddleware(pathname => mayProxy.test(pathname), {
|
||
target: proxy,
|
||
logLevel: 'silent',
|
||
onProxyReq: function(proxyReq, req, res) {
|
||
// Browers may send Origin headers even with same-origin
|
||
// requests. To prevent CORS issues, we have to change
|
||
// the Origin to match the target URL.
|
||
if (proxyReq.getHeader('origin')) {
|
||
proxyReq.setHeader('origin', proxy);
|
||
}
|
||
},
|
||
onError: onProxyError(proxy),
|
||
secure: false,
|
||
changeOrigin: true,
|
||
ws: true,
|
||
xfwd: true
|
||
});
|
||
devServer.use(mayProxy, hpm);
|
||
|
||
// Listen for the websocket 'upgrade' event and upgrade the connection.
|
||
// If this is not done, httpProxyMiddleware will not try to upgrade until
|
||
// an initial plain HTTP request is made.
|
||
devServer.listeningApp.on('upgrade', hpm.upgrade);
|
||
}
|
||
|
||
// Finally, by now we have certainly resolved the URL.
|
||
// It may be /index.html, so let the dev server try serving it again.
|
||
devServer.use(devServer.middleware);
|
||
};
|