2021-12-05

Post / Put methods will not work with React and Spring Boot

I'm stuck on this problem. I have my frontend with React and my backend on Spring Boot / MySql.

The backend works and I did test the Post and Put methods on Postman. So it seems to be a front end problem. The method Get and Delete works on the React. I can LOAD and DELETE everything on my frontend.

The method I'm trying to use to do the Put / Post:

const baseUrl = '/api/products'

const initialState = {
    produit: {id: '', nom: '', prix: '', rabais: ''},
    list: []
}

const config = {mode: 'cors', 
credentials: 'same-origin', 
headers: { 
    'Accept': 'application/json',
    'Content-Type': 'application/json'
 }}

async save() {
        const {produit} = this.state
        const requestOptions = {
            method: (produit.id) ? 'PUT' : 'POST',
            body: JSON.stringify(produit),
            ...config
        }
        fetch(baseUrl, requestOptions);

      }

I've tried to change the mode and the credentials on "config". The state seems to work since I can print the variables.

I have the "proxy": "http://localhost:8080" on my package.json.

When I'm trying to do the POST / PUT method I have the following error on Chrome console:

POST http://localhost:3000/api/products 400 (Bad Request)

PUT http://localhost:3000/api/products 400 (Bad Request)

In theory the "http://localhost:3000" is the frontend, and I don't have the /api/products folder on my forntend. When I do the DELETE / GET I have the same prefix "http://localhost:3000" when I see on Chrome console, but it works.

--Edit-- I'm putting the code on the Controller for Put / Post. I've tried the commented code too.


@RestController
@RequestMapping("/api/products")
public class ProductController {
    
    //Injection de dependence
    @Autowired
    private ProductRepository productRepository;
    
//  @RequestMapping(method = {RequestMethod.POST, RequestMethod.PUT})
//  public @ResponseBody Product newProduct(@Valid Product product){
//      productRepository.save(product);
//      return product;
//  }
    
    @PostMapping
    public @ResponseBody Product postProduct(@Valid Product product){
        productRepository.save(product);
        return product;
    }
    
    @PutMapping
    public Product putProduct(@Valid Product product) {
        productRepository.save(product);
        return product;
    }

And the model:

@Entity
public class Product {
    
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;
    
    @NotBlank
    private String nom;
    
    //Java validation
    @Min(0)
    private double prix;
    
    @Min(0)
    @Max(1)
    private double rabais;
    
    public Product() {
        
    }
    
    public Product(String nom, double prix, double rabais) {
        super();
        this.nom = nom;
        this.prix = prix;
        this.rabais = rabais;
    }

Help me to find what kind of sorcery is this. Thank you =)



from Recent Questions - Stack Overflow https://ift.tt/3EsXZEs
https://ift.tt/eA8V8J

No comments:

Post a Comment