React JS - 404 - (Not Found) error when attempting to consume json API

Question

I am following a tutorial on React JS Authentication using JWT and created a login form that consumes a JSON API, which generates a token upon entering the correct username and password. When I click the the submit button, I get a 404 error - not found (via Chrome console / network tab). However, when I test the API via postman (entering the username and password (JSON) into the body, a token is returned)

The login page calls a function from another file, which is use to authenticate the user and obtain the token. I am wondering if my fetch statement is setup correctly, this is what I have:

login method:

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);
        })
    }

...this is my fetch method:

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())
    }

below, I posted URLs to the full code if that helps:

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

...could I get some help as to what I'm doing wrong and/or if there is something I'm missing?

Steve Vaughan · Accepted Answer · 2018-05-16 22:00:36Z

1

It looks as though your fetch setup is ok, and the fact that your API works using postman, but not when being called via the code you posted makes me think that ${this.domain}/login/ isn't producing the output you expect it to.

I notice that you aren't supplying a domain when creating your AuthService instance, which will cause the domain to fall back to http://theApiUrl:11111/api/auth. I would place some console.log statements into the fetch method and see what value url is being supplied as.

answered May 16, 2018 at 22:00

Steve Vaughan

2,17916 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1724708 Over a year ago

thanks Steve, the problem was in ${this.domain}/login/, again, thank you for getting me on the right path.

Collectives™ on Stack Overflow

React JS - 404 - (Not Found) error when attempting to consume json API

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related