React useEffect() localhost API 获取不起作用答案

【问题标题】：React useEffect() localhost API fetching doesn't workReact useEffect() localhost API 获取不起作用
【发布时间】：2020-04-18 13:08:47
【问题描述】：

我的 ReactJS 应用程序出现问题。我正在尝试从我编写的（在 GOlang 中）在 localhost:9090 上运行的 API 获取数据。

我正在尝试获取这样的数据（setter 将 'TEST' 用于测试目的）

function ImamsDetails() {
    const [firstName, setFirstName] = React.useState(null);
    const [lastName, setLastName] = React.useState(null);

    React.useEffect(() => {
        fetch('http://localhost:9090/imams/1')
            .then(results => results.json())
            .then(data => {
                setFirstName('TEST');
                setLastName('TEST');
            });
        }, []);

    return (
        <div>
            Name: {!firstName || !lastName ? 'Loading...' : `${firstName} ${lastName}`}
        </div>
    );
}

我尝试将 localhost 更改为 127.0.0.1 或我的计算机 IP 地址，但它不起作用。它卡在“正在加载...”上。然而，如果我将 URI 更改为像 https://jsonplaceholder.typicode.com/todos/1 这样的遥远的假 API，它可以正常工作。

我的 API 返回如下内容：

{"Id":1,"FName":"XXX","LName":"YYY","PersonType":2,"GivenAudios":null}

与下面发布的链接格式相同。

有没有想过为什么它不适用于 localhost？

【问题讨论】：

您可以尝试添加catch 并检查fetch 上的错误吗？
我收到此消息“从源 'localhost:3000' 获取 'localhost:9090/imams/1' 的访问权限已被 CORS 策略阻止：不存在 'Access-Control-Allow-Origin' 标头请求的资源。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。”
好的，我已经在 API 的响应中添加了标头（“Access-Control-Allow-Origin”），现在它工作正常，就这么愚蠢。谢谢您的帮助。我怎样才能支持你或其他什么？
不，很乐意提供帮助

标签： reactjs api localhost react-hooks use-effect

【解决方案1】：

你在使用create-react-app吗？您应该在 package.json 中设置代理，以便您可以从外部 url 获取数据。 Here 你可以在 React 文档中阅读更多内容。

将此添加到您的package.json：

"proxy": "http://localhost:9090"

【讨论】：