如何为Gatsby搭配netlify-lambda配置自定义Webpack代理

你找对了配置的方向，但目前proxy的规则还没写完整，我来帮你修正成可用的版本：

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'develop') {
    config.merge({
      devServer: {
        proxy: {
          '/.netlify/functions': {
            target: 'http://localhost:9000',
            pathRewrite: { '^/.netlify/functions': '' },
            changeOrigin: true
          }
        }
      }
    })
  }
  return config; // 务必返回修改后的配置，否则不会生效！
}

关键配置项说明： #

• target：指定代理的目标服务地址，也就是netlify-lambda启动的9000端口本地服务
• pathRewrite：把请求路径里的/.netlify/functions前缀移除，这样请求/.netlify/functions/myFunctionName会被转发成http://localhost:9000/myFunctionName，完美匹配netlify-lambda的函数地址格式
• changeOrigin：开启这个参数可以避免本地代理时的跨域相关问题，确保请求正常转发

另外要注意，你之前的代码漏掉了return config这一步，这会导致修改后的Webpack配置无法生效，一定要补上。

配置完成后重启Gatsby开发服务器，现在你在代码里调用/.netlify/functions/myFunctionName时，开发环境会自动代理到http://localhost:9000/myFunctionName，生产环境则会正常使用Netlify原生的函数地址，不用修改业务代码就能兼容两种环境啦。

内容的提问来源于stack exchange，提问作者anthowelc