title: Spring boot and React JS: Uncaught (in promise) Error: Request failed with status code 404
body: <p>I make web application with udemy tutorial in Spring Boot and React JS. I have everything the same like as in this tutorial, but when I make request I get this error: </p>
  
  <p>Error at the end of this post.</p>
  
  <p>React JS project structure:</p>
  
  <p>TodoDataService.js</p>
  
  <pre><code>import axios from 'axios';
  
  class TodoDataService {
  retrieveAllTodos(name) {
      return axios.get(`http:localhost:8081/users/${name}/todos`);
  }
  }
  export default new TodoDataService();
  </code></pre>
  
  <p>ListTodosComponent.js</p>
  
  <pre><code>import React from 'react';
  import AuthenticationService from './AuthenticationService';
  import TodoDataService from '../../api/todo/TodoDataService';
  
  
  class ListTodosComponent extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          todos: []
      }
  }
  componentDidMount() {
      let username = AuthenticationService.getLoggedInUserName();
      TodoDataService.retrieveAllTodos(username)
      .then(
          response =&gt; {
              this.setState({ todos: response.data })
          }
      )
  }
  
  render() {
      return (
          &lt;div&gt;
              &lt;h1&gt;List Todos&lt;/h1&gt;
              &lt;div className="container"&gt;
                  &lt;table className="table"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;id&lt;/th&gt;
                              &lt;th&gt;description&lt;/th&gt;
                              &lt;th&gt;Target Date&lt;/th&gt;
                              &lt;th&gt;Is Completed?&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          {
                              this.state.todos.map (
                                  todo =&gt;
                                  &lt;tr key={todo.id}&gt;
                                      &lt;td&gt;{todo.id}&lt;/td&gt;
                                      &lt;td&gt;{todo.description}&lt;/td&gt;
                                      &lt;td&gt;{todo.done.toString()}&lt;/td&gt;
                                      &lt;td&gt;{todo.targetDate.toString()}&lt;/td&gt;
                                  &lt;/tr&gt;
                              )
                          }
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  }
  
  export default ListTodosComponent;
  </code></pre>
  
  <p>WelcomeComponent.js</p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  import HelloWorldService from '../../api/todo/HelloWorldService';
  
  class WelcomeComponent extends React.Component {
  constructor(props) {
      super(props);
      this.retrieveWelcomeMessage = this.retrieveWelcomeMessage.bind(this);
      this.state = {
          welcomeMessage: ''
      }
  
      this.handleSuccessfulResponse = this.handleSuccessfulResponse.bind(this);
      this.handleError = this.handleError.bind(this);
  }
  
  render() {
      return (
          &lt;&gt;
              &lt;h1&gt;Welcome!&lt;/h1&gt;
              &lt;div className="container"&gt;
                  Welcome {this.props.match.params.name}
                  &lt;br /&gt;
                  You can manage your todos &lt;Link to="/todos"&gt;here&lt;/Link&gt;
              &lt;/div&gt;
              &lt;div className="container"&gt;
                  Click here to get a customized welcome message.
                  &lt;button onClick={this.retrieveWelcomeMessage} className="btn btn-success"&gt;Get Welcome Message&lt;/button&gt;
              &lt;/div&gt;
              &lt;div className="container"&gt;
                  {this.state.welcomeMessage}
              &lt;/div&gt;
          &lt;/&gt;
      );
  }
  
  retrieveWelcomeMessage() {
      // HelloWorldService.executeHelloWorldService()
      // .then(response =&gt; this.handleSuccessfulResponse(response));
  
      // HelloWorldService.executeHelloWorldBeanService()
      // .then(response =&gt; this.handleSuccessfulResponse(response));
  
      HelloWorldService.executeHelloWorldPathVariableService(this.props.match.params.name)
      .then(response =&gt; this.handleSuccessfulResponse(response))
      .catch(error =&gt; this.handleError);
  }
  
  handleSuccessfulResponse(response) {
      console.log(response);
      this.setState({welcomeMessage: response.data.message});
  }
  
  handleError(error) {
      console.log(error);
      this.setState({welcomeMessage: error.response.data.message});
  }
  }
  
  export default WelcomeComponent;
  </code></pre>
  
  <p>AuthenticationService.js</p>
  
  <pre><code>class AuthenticationService {
  registerSuccessfulLogin(username, password) {
      sessionStorage.setItem('authenticatedUser', username);
  }
  
  logout() {
      sessionStorage.removeItem('authenticatedUser');
  }
  
  isUserLoggedIn() {
      let user = sessionStorage.getItem('authenticatedUser');
      if(user === null) {
          return false;
      }
      return true;
  }
  
  getLoggedInUserName() {
      let user = sessionStorage.getItem('authenticatedUser');
      if(user === null) return ''
      return user
  }
  }
  
  export default new AuthenticationService();
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
  "name": "todo-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  "axios": "^0.18.0",
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "react-router-dom": "^5.0.0",
  "react-scripts": "3.0.1"
  },
  "scripts": {
  "start": "PORT=4200 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
  },
  "eslintConfig": {
  "extends": "react-app"
  },
  "browserslist": {
  "production": [
    "&gt;0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
  }
  }
  </code></pre>
  
  <p>SPRING BOOT project structure: </p>
  
  <p>TodoResource controller class</p>
  
  <pre><code>@RestController
  @CrossOrigin(origins = "http://localhost:4200")
  public class TodoResource {
  
  @Autowired
  private TodoHardcodedService todoService;
  
  @GetMapping("/users/{username}/todos")
  public List&lt;Todo&gt; getAllTodos(@PathVariable String username) {
      return todoService.findAll();
  }
  }
  </code></pre>
  
  <p>TodoHardcodedService class</p>
  
  <pre><code>@Service
  public class TodoHardcodedService {
  
  private static List&lt;Todo&gt; todos = new ArrayList&lt;&gt;();
  private static int idCounter = 0;
  
  static {
      todos.add(new Todo(++idCounter, "user", "Learn to Dance", new Date(), false));
      todos.add(new Todo(++idCounter, "user", "Learn about Microservices", new Date(), false));
      todos.add(new Todo(++idCounter, "user", "Learn about Angular", new Date(), false));
  }
  
  public List&lt;Todo&gt; findAll() {
      return todos;
  }
  }
  </code></pre>
  
  <p>Todo model class</p>
  
  <pre><code>public class Todo {
  
  private long id;
  private String username;
  private String description;
  private Date targetDate;
  private boolean isDone;
  
  // others: constructor with all fields, getters and setters
  }
  </code></pre>
  
  <p>application.properties</p>
  
  <pre><code>server.port=8081
  </code></pre>
  
  <p>If you have any questions about code or any idea to solution this issue, so write.</p>
  
  <p>Error:</p>
  
  <pre><code>xhr.js:173 
  GET http://localhost:4200/localhost:8081/users/user/todos 404 (Not 
  Found)
  dispatchXhrRequest @ xhr.js:173
  xhrAdapter @ xhr.js:18
  dispatchRequest @ dispatchRequest.js:49
  Promise.then (async)
  request @ Axios.js:55
  Axios.&lt;computed&gt; @ Axios.js:65
  wrap @ bind.js:11
  retrieveAllTodos @ TodoDataService.js:5
  componentDidMount @ ListTodosComponent.js:15
  commitLifeCycles @ react-dom.development.js:18109
  commitAllLifeCycles @ react-dom.development.js:19668
  callCallback @ react-dom.development.js:147
  invokeGuardedCallbackDev @ react-dom.development.js:196
  invokeGuardedCallback @ react-dom.development.js:250
  commitRoot @ react-dom.development.js:19892
  (anonymous) @ react-dom.development.js:21440
  unstable_runWithPriority @ scheduler.development.js:255
  completeRoot @ react-dom.development.js:21439
  performWorkOnRoot @ react-dom.development.js:21362
  performWork @ react-dom.development.js:21267
  performSyncWork @ react-dom.development.js:21241
  requestWork @ react-dom.development.js:21096
  scheduleWork @ react-dom.development.js:20909
  scheduleRootUpdate @ react-dom.development.js:21604
  updateContainerAtExpirationTime @ react-dom.development.js:21630
  updateContainer @ react-dom.development.js:21698
  push../node_modules/react-dom/cjs/react- 
  dom.development.js.ReactRoot.render @ react- 
  dom.development.js:22011
  (anonymous) @ react-dom.development.js:22163
  unbatchedUpdates @ react-dom.development.js:21486
  legacyRenderSubtreeIntoContainer @ react-dom.development.js:22159
  render @ react-dom.development.js:22234
  ./src/index.js @ index.js:7
  __webpack_require__ @ bootstrap:781
  fn @ bootstrap:149
  0 @ serviceWorker.js:135
  __webpack_require__ @ bootstrap:781
  checkDeferredModules @ bootstrap:45
  webpackJsonpCallback @ bootstrap:32
  (anonymous) @ main.chunk.js:1
  Show 8 more frames
  
  createError.js:17 
  Uncaught (in promise) Error: Request failed with status code 404
  at createError (createError.js:17)
  at settle (settle.js:19)
  at XMLHttpRequest.handleLoad (xhr.js:78)
  </code></pre>