使用 React Router 的代理 API 请求
Posted
技术标签:
【中文标题】使用 React Router 的代理 API 请求【英文标题】:Proxy API request using React Router 【发布时间】:2019-06-20 22:39:25 【问题描述】:我正在尝试设置一个代理来处理 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 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 时,我是否需要做任何额外的工作才能完成这项工作?
【问题讨论】:
react-router
只处理你 App 的路由部分,并根据当前路由决定应该显示哪些内容。代理是否在组件中?
它在函数中使用,我在原问题中添加了一个示例。
啊,我想我可能在官方文档中找到了您的解决方案:facebook.github.io/create-react-app/docs/…
你能指出哪一部分可能是解决方案吗?我已阅读这些内容,但似乎找不到任何其他帮助。如前所述,这在过去非常有效,只有在使用 react-router 时才会出现问题。
刚看到你的回复。您可以尝试在两条路线上使用exact
参数吗? react-router 可能会干扰您的代理
【参考方案1】:
问题中的代码正在运行没有问题。当代理请求返回错误时,它将显示为来自本地主机,而不是来自代理 url。
【讨论】:
【参考方案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 的代理 API 请求的主要内容,如果未能解决你的问题,请参考以下文章
react-router的browserHistory/react-router-dom的BrowserRouter刷新页面404问题解决
使用 Passport + Facebook + Express + create-react-app + React-Router + 代理进行身份验证
使用 Apache 反向代理的 React-router url 不匹配
使用带有 React 的 Context API 的 react-router-dom 的意外输出