React - Fetch - POST- Problem z przesłaniem danych

Question

Witam,

Mam problem z przesłaniem danych do servera wyrzuca mi błąd 400  jednak sprawdziłem url narzędziem insomnia i za pomocą tego narzędzia można przesłać dane url jest przekopiowany z insomni więc url musi być dobry ale nie rozumiem dlaczego nie działa w frontend. Dla lepszego zobrazowania co ja wykonuje jest to ten tutorial zatrzymałem się na 1:20:50 https://www.youtube.com/watch?v=7CqJlxBYj-M&t=4955s ten Axios co on używał nie działał mi więc pomyślałem że wyślę fetch który także mi nie działa i teraz to już nie wiem, co jest nie tak?.

    onSubmit = (e) => {

        e.preventDefault();

        const user = {
            username: this.state.username,
        }

        fetch(`http://localhost:5000/users/add`, {
            method: 'POST',
            body: JSON.stringify(user)
        })
            .then(r => r.json())
            .then(r => console.log('sykces    ' + r))
            .catch(err => console.log('error:   ' + err))


        this.setState({
            username: '',
        })
    }

 

Comments

Co konsola wypluwa?

---

Brakowało mi tego 

            headers: {  //very important

                'Content-Type': 'application/json'

            },

A teraz pytanie fetch przesyła mi dane ale w przeglądarce dostaje taką informację 

POST http://localhost:5000/users/add 400 (Bad Request)
CreateUser.component.js:33 ErrorMongoWriteConcernError: No write concern mode named 'majority;' found in replica set configuration

cała funkcja wygląda tak

   onSubmit = (e) => {

        e.preventDefault();

        const user = {
            username: this.state.username,
        }

        fetch(`http://localhost:5000/users/add`, {
            method: 'POST',
            body: JSON.stringify(user),
            headers: {  //very important
                'Content-Type': 'application/json'
            },
        })
            .then(res => res.json())
            .then(res => console.log(res))
            .catch(err => console.log('Error ' + err))

        this.setState({
            username: '',
        })
    }

 

Answer 1

Przeglądarki posiadają dodatkowy system bezpieczeństwa przesyłania danych miedzy domenami. (CORS) Jeśli strona jest w innej domenie (inny port to też inna domena) to przeglądarka będzie to blokowała.

Przeglądarki blokują też wysyłanie danych przez http gdy front end był pobierany przez https. Jest wiele różnych mechanizmów które utrudniają wysłanie danych do API z poziomu przeglądarki.

Obstawiałbym te mechanizmi za problemy :) Dla potwierdzenia wyślij błędy z konsoli F12 przeglądarki.

Comments

Brakowało mi tego 

            headers: {  //very important

                'Content-Type': 'application/json'

            },

A teraz pytanie fetch przesyła mi dane ale w przeglądarce dostaje taką informację 

POST http://localhost:5000/users/add 400 (Bad Request)
CreateUser.component.js:33 ErrorMongoWriteConcernError: No write concern mode named 'majority;' found in replica set configuration

cała funkcja wygląda tak

 onSubmit = (e) => {

        e.preventDefault();

        const user = {
            username: this.state.username,
        }

        fetch(`http://localhost:5000/users/add`, {
            method: 'POST',
            body: JSON.stringify(user),
            headers: {  //very important
                'Content-Type': 'application/json'
            },
        })
            .then(res => res.json())
            .then(res => console.log(res))
            .catch(err => console.log('Error ' + err))

        this.setState({
            username: '',
        })
    }

 

---

Błąd po stronie backendu lub w danych z frontendu. Musisz zerknąć do kodu swojego API czy wszystko jest ok