Question

遵循使用JWT的React JS身份验证教程并创建了一个使用json api的登录表单，该表单在输入正确的用户名和密码时生成令牌。当我点击提交按钮时，我收到 404错误 - 未找到（通过Chrome控制台/网络标签）。但是，当我通过邮递员测试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 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

...我可以帮助我做错了什么和/或是否有我失踪的东西？

Answer 1

看起来你的fetch设置是正常的，而且你的API使用postman工作，但是当你通过你发布的代码调用时，我认为${this.domain}/login/没有产生你期望的输出它来。

我注意到您在创建AuthService实例时没有提供域，这会导致域回退到http://theApiUrl:11111/api/auth。我会将一些console.log语句放入fetch方法，并查看提供的url值是什么。

尝试使用json API时，React JS - 404 - （Not Found）错误

1 个答案: