Server responded with 404 - POST request

Question

I wish to create a web application where user input is saved to database. I am using Java and React for the UI but I keep getting 404 error.

I have the following scripts:

React:

addCreditCard(event) {
var that = this;
event.preventDefault();
let card_data = {
    cardholder : this.refs.cardholder.value,
    cardnumber : this.refs.cardnumber.value,
    card_identifier : (this.refs.cardnumber.value).substr(15),
    expiration : this.refs.expiration.value,
    cvc : this.refs.cvc.value
};
console.log('Ez itt: ' + JSON.stringify(card_data))
const request = {
  method: 'post',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
  },
     body: JSON.stringify(card_data)

}
let creditcards = that.state.creditcards;
      creditcards.push(card_data);
        that.setState({
         creditcards : creditcards
})

console.log(creditcards)

fetch('/api/new-card', request)
.then(response => {
    if (response.ok) {
         return response.json();
       } else {
          throw new Error('Something went wrong ...');
       }
     })
       .then(data => this.setState({ creditcards: data.creditcards }))
       .catch(error => this.setState({ error }))
       }

Java

@Path("")
@Produces(ExtendedMediaType.APPLICATION_JSON_UTF8)
@Consumes(ExtendedMediaType.APPLICATION_JSON_UTF8)
public class CreditCardRest {

/**
 * Injected configurationDao.
 */
@Inject
@Named(SessionFactoryProducer.SQL_SESSION_FACTORY)
private CardDAO cardDAO;

@RequestMapping(value = "/new-card", method = RequestMethod.POST)
@Transactional
public Response.ResponseBuilder saveCreditCardData(@PathParam("cardholder") final String cardholder,
        @PathParam("cardnumber") final Integer cardnumber,
        @PathParam("expiration") final String expiration,
        @PathParam("cvc") final Integer cvc,
        @PathParam("card_identifier") final Integer card_identifier,
        @Context HttpServletResponse servletResponse) throws Exception {

    Reader reader = Resources.getResourceAsReader("mybatis-card-service.xml");
    SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(reader);
    SqlSession session = sqlSessionFactory.openSession();

    //Create a credit card object
    cardDAO.saveCreditCardData(cardholder, cardnumber, expiration, cvc, card_identifier);

    System.out.println("record inserted successfully");
    session.commit();
    session.close();

    return Response.status(200);
   }
  }

The JS code works, the problem is somewhere at the connection between the Java class and Ract... Sorry, but I cannot figure it out... Of cource, this is just an installment of the whole code, but I hope it is might obvious for someone already at the first sight... Thanks a lot!

Thanks...

Answer 1

There is no /api path. Your path to the /new-card endpoint is /new-card because there is no root path at the class level.

@Path("/api")
@Produces(ExtendedMediaType.APPLICATION_JSON_UTF8)
@Consumes(ExtendedMediaType.APPLICATION_JSON_UTF8)
public class CreditCardRest {

}