时间戳

首页 > 解决方案 > 将跨域请求阻止到 localhost 的 React 应用程序

javascript - 将跨域请求阻止到 localhost 的 React 应用程序

问题描述

我对 npm（和“兄弟姐妹”）都是新手并且做出反应。我仍然设法创建了一个用户界面。我的问题是从我的服务器上获取数据，在 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":""}]

稍后我将尝试上传服务器部分的战争和反应代码的 zip。

我尝试了 3 个不同“教程”的解决方案。

仍然无法让它工作。

我需要帮助的是，从内部反应代码，调用我的服务，最后得到一个我可以循环的结果。

代码：

 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 问题。

标签： javascriptreactjsajaxcorslocalhost

解决方案

您可以使用以下两种方法之一解决此问题

  1. 最简单的方法是向您的反应应用程序添加代理“代理：”http://127.0.0.1:8080“

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

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

推荐阅读