React JS - Fetch() 事件导致 404 Not Found答案

【问题标题】：React JS - Fetch() Event Results in 404 Not FoundReact JS - Fetch() 事件导致 404 Not Found
【发布时间】：2018-12-27 05:46:13
【问题描述】：

我创建了一个 React JS 应用程序并向一个类添加了一个 fetch() 事件，但我无法确定如何定位文件路径，因为生成的代码会导致控制台中出现 404 Not Found 错误。

LoginForm.js:11 POST http://localhost:3000/api/user-login 404 (Not Found)

我正在尝试在/src/api/user-login.js 中找到user-login.js

这是我的文件夹结构：

https://monosnap.com/direct/DT5zykUaHOVz8YMJy9O96B762bOsvQ

这是来自LoginForm.js的类中的相关代码：

class LoginForm extends React.Component {
    handleSubmit(event) {
        var user = {
            'clientname': 'client name here',
            'email': 'client email here'
        };

        fetch('/api/user-login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(user)
        })
    }

    render() {
        // Stuff that gets rendered
    }
}

我尝试了所有我能想到的/app/user-login，包括：

app/user-login
app/user-login.js
/app/user-login
/app/user-login.js
./app/user-login
./app/user-login.js
../app/user-login
../app/user-login.js

有人可以告诉我如何链接到这个文件吗？抱歉，如果这是一个愚蠢的问题，我才学习 React JS 几天。感谢您的帮助。

【问题讨论】：

./api/user-login 不会正确导入吗？因为LoginForm.js 和api 文件夹位于同一路由级别。
您有运行该脚本的后端吗？因为您正在做的是向未运行的 user-login.js 创建一个请求
您没有引用 api 文件夹 - 查看您的文件夹结构，我希望它是 ./api/user-login。请注意，您引用的是 app 而不是 api。还有，那个js文件是什么样子的
您是否在您的路由 api 文件中将路由 /api/user-login 设置为 POST 类型？你在旁边使用节点吗？
我想你和这个人也有同样的问题，请看看也许会有一些想法stackoverflow.com/questions/50007055/…

标签： javascript reactjs

【解决方案1】：

我没有设置 API 服务器，这就是显示 404 错误的原因。我必须使用 ExpressJS，这意味着每当我的 React 应用程序向非静态资产（基本上不是图像或 CSS 或 index.html）发出请求时，它都会将请求转发到服务器。

我使用以下教程来做到这一点：

https://daveceddia.com/create-react-app-express-backend/

【讨论】：