将跨域请求阻止到本地主机的 React 应用程序

编程问答 2022-05-25

问题描述

我对 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 个不同“教程”的解决方案。

仍然无法让它工作。

我需要帮助的是，从 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 问题。

解决方法

您可以通过以下两种方式之一解决此问题

  1. 最简单的方法是为你的 React 应用添加一个代理 "代理："http://127.0.0.1:8080"

然后你请求如下： fetch("/CabinCTRLWS/webresources/service/clients")

  1. 使用以下 npm 包转到您的服务器并允许 cors https://www.npmjs.com/package/cors
ajaxcorscorsjavascriptlocalhostreactjsreactjs