Question

我正在尝试设置代理以处理GET和POST请求。我已经做了很多次而没有在以前的react应用程序中使用react-router，它的工作原理很完美，但是由于此应用程序使用react-router，因此失败了。

代理不起作用，而是尝试在localhost域上进行呼叫：

ok: false
redirected: false
status: 500
statusText: "Internal Server Error"
url: "http://localhost:3001/api/call"

我对我的React Router没有任何幻想：

<Router history={history}>
    <Switch>
        <Route path="/" component={Home} />
        <Route path="about" component={About} />
    </Switch>
</Router>

这是代理（在setupProxy.js中）：

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api/call', { target: "http://www.domain.com.au/", changeOrigin: true } ));
};

以下是其用法示例：

add(data) {

    this.setState({button: "loading"})

    fetch('/api/call', {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
    })
    .then(res => this.setState({success: res.ok}))
    .catch(err => this.setState({success: false}))

}

使用react-router时，我是否需要做任何额外的工作才能使它正常工作？

Answer 1

问题正常运行中的代码没有问题。当代理请求返回错误时，它将显示此错误来自本地主机，而不是来自代理URL。

Answer 2

我们在开发模式下使用的这个代理，它在生产构建中不起作用。如果您必须使用开发模式，则您的请求是 POST http://www.domain.com.au/api/call 如果您需要将您的请求直接发送到 http://www.domain.com.au/ 然后制作您的代理

module.exports = function(app) {
  app.use(proxy('/api', {
    target: "http://www.domain.com.au/",
    changeOrigin: true,
    pathRewrite: {
                '^/api/': '/', // remove base path
            }
    } ));
};

现在，您可以 fetch("/api/mydata") 到 GET http://www.domain.com.au/mydata

使用React Router的Proxy API请求

2 个答案: