kylefang/create-react-app
1
0
Fork 0
mirror of https://github.com/zhigang1992/create-react-app.git synced 2026-05-16 19:09:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add proxy option to package.json (#282)

Browse Source 
This allows users to avoid CORS in simple projects that are hosted on the same server as backend.
This commit is contained in:
Dan Abramov
2016-08-04 16:49:59 +01:00
committed by GitHub
parent 156a3c6cf1
commit 379cf5c96d
2 changed files with 55 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
scripts/start.js
View File

@@ -13,11 +13,14 @@ var path = require('path');
var chalk = require('chalk');
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var historyApiFallback = require('connect-history-api-fallback');
var httpProxyMiddleware = require('http-proxy-middleware');
var execSync = require('child_process').execSync;
var opn = require('opn');
var detect = require('detect-port');
var prompt = require('./utils/prompt');
var config = require('../config/webpack.config.dev');
var paths = require('../config/paths');
// Tools like Cloud9 rely on this
var DEFAULT_PORT = process.env.PORT || 3000;
@@ -155,16 +158,63 @@ function openBrowser(port) {
opn('http://localhost:' + port + '/');
}
function addMiddleware(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({
// 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 won’t 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)
var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
devServer.use(mayProxy,
// Pass the scope regex both to Express and to the middleware for proxying
// of both HTTP and WebSockets to work without false positives.
httpProxyMiddleware(pathname => mayProxy.test(pathname), {
target: proxy,
logLevel: 'silent',
secure: false,
changeOrigin: true
})
);
}
// 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);
}
function runDevServer(port) {
new WebpackDevServer(compiler, {
historyApiFallback: true,
var devServer = new WebpackDevServer(compiler, {
hot: true, // Note: only CSS is currently hot reloaded
publicPath: config.output.publicPath,
quiet: true,
watchOptions: {
ignored: /node_modules/
}
}).listen(port, (err, result) => {
});
addMiddleware(devServer);
devServer.listen(port, (err, result) => {
if (err) {
return console.log(err);
}