diff --git a/docs/docs/api-proxy.md b/docs/docs/api-proxy.md index 6624ade548132..7d1517b7faa58 100644 --- a/docs/docs/api-proxy.md +++ b/docs/docs/api-proxy.md @@ -23,6 +23,23 @@ module.exports = { } ``` +or: + +```js:title=gatsby-config.js +module.exports = { + proxy: [ + { + prefix: "/api", + url: "http://dev-mysite.com", + }, + { + prefix: "/api2", + url: "http://dev2-mysite.com", + }, + ], +} +``` + This way, when you `fetch('/api/todos')` in development, the development server will recognize that it’s not a static asset, and will proxy your request to `http://dev-mysite.com/api/todos` as a fallback. diff --git a/packages/gatsby/src/commands/develop.ts b/packages/gatsby/src/commands/develop.ts index 9b0aba1d9aac3..9204ff82881c3 100644 --- a/packages/gatsby/src/commands/develop.ts +++ b/packages/gatsby/src/commands/develop.ts @@ -285,34 +285,35 @@ async function startServer(program: IProgram): Promise { // Set up API proxy. const { proxy } = store.getState().config if (proxy) { - const { prefix, url } = proxy - app.use(`${prefix}/*`, (req, res) => { - const proxiedUrl = url + req.originalUrl - const { - // remove `host` from copied headers - // eslint-disable-next-line @typescript-eslint/no-unused-vars - headers: { host, ...headers }, - method, - } = req - req - .pipe( - got - .stream(proxiedUrl, { headers, method, decompress: false }) - .on(`response`, response => - res.writeHead(response.statusCode || 200, response.headers) - ) - .on(`error`, (err, _, response) => { - if (response) { - res.writeHead(response.statusCode || 400, response.headers) - } else { - const message = `Error when trying to proxy request "${req.originalUrl}" to "${proxiedUrl}"` - - report.error(message, err) - res.sendStatus(500) - } - }) - ) - .pipe(res) + proxy.forEach(({ prefix, url }) => { + app.use(`${prefix}/*`, (req, res) => { + const proxiedUrl = url + req.originalUrl + const { + // remove `host` from copied headers + // eslint-disable-next-line @typescript-eslint/no-unused-vars + headers: { host, ...headers }, + method, + } = req + req + .pipe( + got + .stream(proxiedUrl, { headers, method, decompress: false }) + .on(`response`, response => + res.writeHead(response.statusCode || 200, response.headers) + ) + .on(`error`, (err, _, response) => { + if (response) { + res.writeHead(response.statusCode || 400, response.headers) + } else { + const message = `Error when trying to proxy request "${req.originalUrl}" to "${proxiedUrl}"` + + report.error(message, err) + res.sendStatus(500) + } + }) + ) + .pipe(res) + }) }) } diff --git a/packages/gatsby/src/joi-schemas/joi.js b/packages/gatsby/src/joi-schemas/joi.js index 85bbb73cfa0e9..d211184251ee8 100644 --- a/packages/gatsby/src/joi-schemas/joi.js +++ b/packages/gatsby/src/joi-schemas/joi.js @@ -34,10 +34,14 @@ export const gatsbyConfigSchema = Joi.object() }).unknown(), mapping: Joi.object(), plugins: Joi.array(), - proxy: Joi.object().keys({ - prefix: Joi.string().required(), - url: Joi.string().required(), - }), + proxy: Joi.array() + .items( + Joi.object().keys({ + prefix: Joi.string().required(), + url: Joi.string().required(), + }) + ) + .single(), developMiddleware: Joi.func(), }) // throws when both assetPrefix and pathPrefix are defined