尝试使用json API时出现React JS-404-（未找到）错误

我正在学习使用JWT进行React JS身份验证的教程，并创建了一个使用json api的登录表单，该表单在输入正确的用户名和密码后生成一个令牌。当我点击提交按钮时，我得到一个404错误-未找到（通过chrome控制台/网络选项卡）。但是，当我通过postman测试API时（在正文中输入用户名和密码（json），将返回一个令牌）

登录页面从另一个文件调用函数，该文件用于验证用户身份并获取令牌我想知道我的fetch语句是否设置正确，这就是我所拥有的：

登录方法：

login(username, password) {
        // Get a token from api server using the fetch api
        return this.fetch(`${this.domain}/login`, {
            method: 'POST',
            body: JSON.stringify({
                username,
                password
            })
        }).then(res => {
            this.setToken(res.token) // Setting the token in localStorage
            return Promise.resolve(res);
        })
    } 

fetch(url, options) {
        // performs api calls sending the required authentication headers
        const headers = {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }

        // Setting Authorization header
        // Authorization: Bearer xxxxxxx.xxxxxxxx.xxxxxx
        if (this.loggedIn()) {
            headers['Authorization'] = 'Bearer ' + this.getToken()
        }

        return fetch(url, {
            headers,
            ...options
        })
            .then(this._checkStatus)
            .then(response => response.json())
    }

…这是我的获取方法：

login(username, password) {
        // Get a token from api server using the fetch api
        return this.fetch(`${this.domain}/login`, {
            method: 'POST',
            body: JSON.stringify({
                username,
                password
            })
        }).then(res => {
            this.setToken(res.token) // Setting the token in localStorage
            return Promise.resolve(res);
        })
    } 

fetch(url, options) {
        // performs api calls sending the required authentication headers
        const headers = {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }

        // Setting Authorization header
        // Authorization: Bearer xxxxxxx.xxxxxxxx.xxxxxx
        if (this.loggedIn()) {
            headers['Authorization'] = 'Bearer ' + this.getToken()
        }

        return fetch(url, {
            headers,
            ...options
        })
            .then(this._checkStatus)
            .then(response => response.json())
    }

下面，如果有帮助，我将URL发布到完整代码：

Login https://codepen.io/lkennedy009/pen/GdYOYe?editors=0010#0
AuthService https://codepen.io/lkennedy009/pen/xjyPMY
withAuth https://codepen.io/lkennedy009/pen/bMmYyd?editors=0010#0

---

…我是否可以得到一些帮助，以了解我做错了什么和/或我缺少了什么？

看起来您的获取设置是正常的，而且您的API使用postman工作，但在通过您发布的代码调用时却无法工作，这让我觉得

${this.domain}/login/

没有生成您期望的输出

---

我注意到您在创建AuthService实例时没有提供域，这将导致域返回到

http://theApiUrl:11111/api/auth

。我会在fetch方法中放入一些console.log语句，看看url的值是什么。

谢谢Steve，问题出在${this.domain}/login/，再次感谢您让我走上了正确的道路。