Why does the server refuses to accept the request and throws 415 error?

Question

I'm trying to build a sign up form and connect frontend with a backend server using fetch. But I've come across with a problem, that the server doesn't approve the connection and throw 415 error, IntelliJ IDEA shows this errow "Content type 'text/plain;charset=UTF-8' not supported".

"use strict";

/////////////////////////////////////////////////
// Data

let inputSignUpFirstName = document.querySelector(".signUp__input--firstName");
let inputSignUpLastName = document.querySelector(".signUp__input--lastName");
let inputSignUpPhoneNumber = document.querySelector(".signUp__input--phoneNumber");
let inputSignUpPin = document.querySelector(".signUp__input--pin");

const btnSignUp = document.querySelector(".signUp__btn");
const formSignUp = document.querySelector(".signUp");

/////////////////////////////////////////////////
// EventListeners

formSignUp.addEventListener("submit", addUser);

/////////////////////////////////////////////////
// Functions

function addUser(e){
    e.preventDefault();

    fetch("http://127.0.0.1:8080/registration", {
        method: "POST",
        headers: {
            Accept: "application/json, text/plain;charset=UTF-8",
            "Content-Type": "application/json",
        },
        mode: "no-cors",
        body: JSON.stringify({
            firstName: inputSignUpFirstName.value,
            lastName: inputSignUpLastName.value,
            telephoneNumber: inputSignUpPhoneNumber.value,
            password: inputSignUpPin.value,
        }),
        })
        .then((response) => {
            console.log(response);
            return response.json();
        })
        .then((data) => console.log(data))
        .catch((error) => console.log(error));
}

We checked the url in Postman, and it works well. And one more strange thing, console.log(response) showed that my own url and the one i'm trying to send json to concatenate together like http://127.0.0.1:5501/127.0.0.1:8080/registration. Here is the result in the console:

Response {type: 'basic', url: 'http://127.0.0.1:5501/127.0.0.1:8080/registration', redirected: false, status: 405, ok: false, …} body: (...) bodyUsed: true headers: Headers {} ok: false redirected: false status: 405 statusText: "Method Not Allowed" type: "basic" url: "http://127.0.0.1:5501/127.0.0.1:8080/registration"

I'm doing this for the first time, so I might miss smth important. Thank you in advance for your advice.

UPDATE: I added "Access-Control-Allow-Origin": "http://127.0.0.1:5501" to the header, and the back-end added cors settings to IntelliJ IDEA. So we had to fix both front and the server. Thanks everyone for help!

Answer 1

For starters it could mean that the request method in your frontend and backend app are not the same, hence why you will get a status code of 405. Ensure that your request method which would be POST in this case is the same in both your frontend and backend app.

Error code of 415 will mean the response that is configured in the frontend app was not in the format that it was expecting from the backend. So you will need to either change the expected format in the frontend to match what is coming back from the backend or maybe you will need to convert the response coming from the backend to match back what is expected in the frontend.

I suspect the former, would be more appropriate given the source code that you have provided.