使用 React js 从 AWS 的端点获取数据答案

【问题标题】：Fetching data with the endpoint from AWS using React js使用 React js 从 AWS 的端点获取数据
【发布时间】：2021-03-25 05:57:37
【问题描述】：

我正在使用 axios 从 aws 获取数据。

import React, {useState, useEffect} from 'react';
import axios from 'axios';
function Employee() {
   const[data, setData] = useState([]);
   useEffect(() => {
     axios.get('123.56.234.123:8080/employees?num=1')
     .then(response => {
        setData(response.data);
      })
   },[]);
   return data;
}

从这段代码中，我收到了错误消息

获取 http://localhost:8080/123.56.234.123:8080/employees?num=1 431（请求标头字段太大）。

我认为原因是我获取的网址错误。

在这种情况下，如何从端点获取数据？

PS) 我的节点版本：14.XX

谢谢。

【问题讨论】：

您是否将baseURL 设置为http://localhost:8080？为什么它会被添加到您的网址中？
似乎只是将该IP用作相对URL。我会尝试将http:// 或https:// 添加到123.56.234.123... 并试一试。
@codemonkey 是的，它有效！谢谢！

标签： reactjs

【解决方案1】：

我认为您需要设置一个代理。您当前已将 axios baseURL 设置为 localhost:8080。这就是为什么get url 被添加到baseUrl 之前。

出现错误431(Request Header Fields Too Large)是因为Referrer url太长。

如果您使用的是create-react-app，那么请refer this official documentation。

【讨论】：

我把代理放在 package.json 的底部。另外，我刚刚将 baseURL 更改为 3000。现在我收到错误消息，上面写着 Access to XMLHttpRequest at 'http://123.56.234.123:8080/employees?num=1 from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.