如何在创建 React 应用程序时使用 webpack devServer 代理

Question

我正在使用 create-react-app 创建一个新应用，我想为我的代码添加一些代理。之前我用过webpacks devServer

module.exports = {
  ...
  devServer: {
    proxy: {
      '/api/context*': {
        target: 'http://some.endpoint.com',
        headers: myCustomerHeaders,
        pathRewrite: (path, res) => changeThePath
      }
    }
  }
  ...
}

我尝试在 webpack.config.dev.js 和 webpackDevServer.config.js 中使用相同的方法，并将其 start.js 作为传递给 webpackDevServer.config.js 的代理配置。

我看到了 src/setupProxy.js 的文章，但是在没有 expressJs 运行的情况下它是否适用？无论如何我试过了没有任何结果。我要代理的路径是我希望使用的测试环境 api。

我已经使用 create-react-app 作为旧应用程序的新骨架来升级它，我的旧项目使用代理设置。

现在我正在使用 create-react-app，我希望同样的方式是合理的，但似乎我错了。任何接受我做错事的人？

Answer 1

您可以使用"http-proxy-middleware"

https://github.com/chimurai/http-proxy-middleware

var express = require('express')
var proxy = require('http-proxy-middleware')

var app = express()

app.use('/api', proxy({ target: 'http://www.example.org', changeOrigin: true }))
app.listen(3000)

如何在创建 React 应用程序时使用 webpack devServer 代理

How to use webpack devServer proxy in create react app

javascript

reactjs

webpack

create-react-app