如何解决将跨域请求阻止到本地主机的 React 应用程序
我对 npm(和“兄弟姐妹”)和 React 都是新手。我仍然设法创建了一个用户界面。我的问题是从在 tomcat 上运行的服务器获取数据。
我收到以下错误消息:
跨源请求被阻止:同源策略不允许读取位于 http://127.0.0.1:8080/CabinCTRLWS/webresources/service/clients 的远程资源。 (原因:缺少 CORS 标头“Access-Control-Allow-Origin”)。
请注意,我尝试访问本地主机 http://127.0.0.1:8080/CabinCTRLWS/webresources/service/clients。 我也试过localhost和主机的实际IP地址。
仅供参考 - 它都在虚拟(KVM)机器上运行 - 并不重要。
将地址粘贴到 firefox、chrome 或 Postman 中可提供预期结果。
[{"key":"cff3da01-a4ed-4304-9138-5c97398c9005","userAgent":"Mozilla/5.0 (X11; Linux x86_64; rv:85.0) Gecko/20100101 Firefox/85.0","mod":""}]
我稍后会尝试上传服务器部分的 war 和 react 代码的 zip。
我尝试了来自 3 个不同“教程”的解决方案。
- https://www.youtube.com/watch?v=w7ejDZ8SWv8
- https://reactjs.org/docs/faq-ajax.html
- https://blog.logrocket.com/patterns-for-data-fetching-in-react-981ced7e5c56/
仍然无法让它工作。
我需要帮助的是,从 React 代码内部调用我的服务,最终得到一个我可以循环的结果。
代码:
componentDidMount(){
alert("componentDidMount");
fetch("http://127.0.0.1:8080/CabinCTRLWS/webresources/service/clients")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,clients: result.clients
});
},// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
this.setState({
isLoaded: true,error
});
}
)
}
正如我所说,当涉及到 npm 和 react 时,我完全是个菜鸟。我的 JS 有点老派。 我认为有很多改进,我欢迎任何评论,但我最想解决的是 CORS 问题。
解决方法
您可以通过以下两种方式之一解决此问题
- 最简单的方法是为你的 React 应用添加一个代理 "代理:"http://127.0.0.1:8080"
然后你请求如下: fetch("/CabinCTRLWS/webresources/service/clients")
- 使用以下 npm 包转到您的服务器并允许 cors https://www.npmjs.com/package/cors
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。