Question

我正在创建一个应用程序，React JC的前端，我有一个用Node JS制作的基本REST api。当我尝试从localhost：3001 / user /：id获取数据时，例如在邮递员上 - 一切正常100％。

但是当我尝试在React中获取它的前端（反应应用程序托管在localhost：3000 /）时，它会发出以下错误：

“无法加载localhost：3001 / user / 5b21a5d7588b40be612798d4：交叉原始请求仅支持协议方案：http，数据， chrome，chrome-extension，https。“

我正在尝试获取前端数据的相关代码（Axios就在这里）：

componentDidMount () {
    axios.get("localhost:3001/user/5b21a5d7588b40be612798d4").then(response => {
        console.log(response);
      })

  }

Answer 1

您必须在URL的开头指定协议

componentDidMount () {
    axios.get("http://localhost:3001/user/5b21a5d7588b40be612798d4").then(response => {
        console.log(response);
      })
  }

Answer 2

您需要一个允许跨源资源共享的浏览器插件。在chrome上，我使用this one。你需要打开它，然后它应该工作。请注意，许多网站在出于安全原因（例如YouTube）时禁用了他们的服务。因此，只有在处理项目时才能保持开启状态。

Answer 3

查看网络选项卡并将鼠标悬停在请求上以查看错误通常可以更好地指示错误的内容，而不是日志。

除了CORS问题之外，我之前遇到的另一个问题是当localhost服务器使用自签名证书时浏览器拒绝请求。浏览器不信任它们，并且不会让请求通过，而Postman会。您可以为证书添加例外（不推荐），也可以从https://letsencrypt.org/

等地方获取签名证书

Answer 4

您需要在节点项目中启用CORS。他们是一个名为cors的npm包你可以使用它。

Axios无法从另一个localhost获取json数据

4 个答案: