Как получить API из бэкэнда с ошибкой Axios ⇐ JAVA

[Anonymous]

Я пытаюсь получить данные из бэкэнда Springboot с помощью axios в интерфейсе vite+react, но это приводит к ошибке только при получении идентификатора данных, но URL-адрес работает правильно на локальном хосте с идентификатором.
URL-адрес: -
http://localhost:8080/api/products/1
Но через интерфейс отображается ошибка: -
Не удалось загрузить ресурс: сервер ответил со статусом 400 ()
Ошибка получения продукта: AxiosError
И в Backend отображается ошибка: -
Не удалось преобразовать значение типа «java.lang.String» в требуемый тип «int»; Для входной строки: «NaN»
Фронтенд: — Product.jsx
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import axios from "../axios";

const Product = () => {
const { id } = useParams();
const [product, setProduct] = useState(null);

useEffect(() => {
const fetchProduct = async () => {
const productId = parseInt(id, 10);
try {
const response = await axios.get(`http://localhost:8080/api/products/${productId}`);
setProduct(response.data);
console.log(response.data);
} catch (error) {
console.error("Error fetching product:", error);
}
};

fetchProduct();
}, [id]);

if (!product) {
return (

Loading...

);
}

return (




{product.category}
{product.name}
{product.brand}
{product.description}

{"$" + product.price}

{product.productAvailable ? "Add to cart" : "Out of Stock"}


Stock Available :{" "}

{product.stockQuantity}



Product listed on:
{product.releaseDate}


Update



Delete





);
};

export default Product;


В Backend идентификатор инициализируется как: - Private int ProductID;
Маршрутизатор и объявление маршрута: -
import "./App.css";
import React, { useState, useEffect } from "react";
import Home from "./components/Home";
import Navbar from "./components/Navbar";
import Cart from "./components/Cart.jsx";
import AddProduct from "./components/AddProduct";
import Product from "./components/Product";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { AppProvider } from "./Context/context";

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
const [cart, setCart] = useState([]);
const [selectedCategory, setSelectedCategory] = useState("");

const handleCategorySelect = (category) => {
setSelectedCategory(category);
console.log("Selected category:", category);
};
const addToCart = (product) => {
const existingProduct = cart.find((item) => item.id === product.id);
if (existingProduct) {
setCart(
cart.map((item) =>
item.id === product.id
? { ...item, quantity: item.quantity + 1 }
: item
)
);
} else {
setCart([...cart, { ...product, quantity: 1 }]);
}
};

return (












);
}

export default App;


Бэкенд:-
ProductController.java
package com.shristi.ecom_proj.controller;

import com.shristi.ecom_proj.Model.Product;
import com.shristi.ecom_proj.service.productService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("/api")
public class ProductController {

@Autowired
private productService service;

@RequestMapping("/")
public String greet(){
return "Hello World";
}

@GetMapping("/products")
public List
getAllProducts(){
return service.getAllProducts();
}

@GetMapping("/products/{id}")
public Product getProduct(@PathVariable int id){
return service.getProductById(id);
}
}


ProductService.java
@Autowired
private productRepo repo;

public Product getProductById(int id) {
return repo.findById(id).get();

Product.java
public class Product {

@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
private int productID;
private String Name;}


Подробнее здесь: https://stackoverflow.com/questions/791 ... xios-error