При нажатии на кнопки Изменить или создать, когда должен проходить запрос на сервер, я в devtools вижу что проходит только preflight, котоырй возвращает 204 no content. Я на vite разрабатываю. ItemForm.jsx import { useForm, useFieldArray } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { useEffect } from 'react';
const schema = yup.object({
  name: yup.string().required('Name is required').max(50, 'Max length is 50'),
  category: yup.string().required('Category is required'),
  quantity: yup
    .number()
    .typeError('Quantity must be a number')
    .required('Quantity is required')
    .min(1, 'Quantity must be at least 1'),
  location: yup.string().notRequired(),
  supplier: yup.string().notRequired(),
  supplierLocation: yup.string().notRequired(),
  showPriceDetails: yup
    .string()
    .oneOf(['yes', 'no'], 'Please select an option')
    .required('Please select an option'),

  priceType: yup
    .string()
    .when('showPriceDetails', {
      is: 'yes',
      then: schema => schema.required('Price Type is required'),
      otherwise: schema => schema.notRequired(),
    }),

  price: yup
    .number()
    .transform((value, originalValue) => (originalValue === '' ? undefined : value))
    .when('showPriceDetails', {
      is: 'yes',
      then: schema =>
        schema
          .required('Price is required')
          .typeError('Price must be a number')
          .min(1, 'Price must be at least 1'),
      otherwise: schema => schema.notRequired(),
    }),

  endpoints: yup.array().of(
    yup.object({
      endpoint: yup.string().required('Endpoint is required'),
      status: yup.string().required('Status is required'),
    })
  ),
});
export const ItemForm = ({ defaultValues, onSubmit }) => {
  const {
    register,
    handleSubmit,
    watch,
    control,
    formState: { errors },
    reset,
  } = useForm({
    defaultValues,
    resolver: yupResolver(schema),
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'endpoints',
  });

  const showPriceDetails = watch('showPriceDetails', 'no') === 'yes';

  useEffect(() => {
    reset(defaultValues);
  }, [defaultValues, reset]);

  return (
    <div className="form-container">
      <form onSubmit={handleSubmit(onSubmit)} className="form-wrapper">
        <div className="form-grid grid-3">
          <div className="form-group">
            <label>Name*:</label>
            <input
              {...register('name')}
              className={errors.name ? 'input-error' : ''}
            />
            {errors.name && <p className="error-message">{errors.name.message}</p>}
          </div>

          <div className="form-group">
            <label>Category*:</label>
            <select
              {...register('category')}
              className={errors.category ? 'input-error' : ''}
            >
              <option value="">Select category</option>
              <option value="Electronics">Electronics</option>
              <option value="Furniture">Furniture</option>
              <option value="Clothing">Clothing</option>
              <option value="Food">Food</option>
              <option value="Toys">Toys</option>
              <option value="Books">Books</option>
              <option value="Sports">Sports</option>
            </select>
            {errors.category && (
              <p className="error-message">{errors.category.message}</p>
            )}
          </div>

          <div className="form-group">
            <label>Quantity*:</label>
            <input
              type="number"
              {...register('quantity')}
              className={errors.quantity ? 'input-error' : ''}
            />
            {errors.quantity && (
              <p className="error-message">{errors.quantity.message}</p>
            )}
          </div>
        </div>

        {/* Сетка для поставщика и его локации */}
        <div className="form-grid grid-2">
          <div className="form-group">
            <label>Supplier:</label>
            <input
              {...register('supplier')}
              className={errors.supplier ? 'input-error' : ''}
            />
            {errors.supplier && (
              <p className="error-message">{errors.supplier.message}</p>
            )}
          </div>

          <div className="form-group">
            <label>Supplier Location:</label>
            <input
              {...register('supplierLocation')}
              className={errors.supplierLocation ? 'input-error' : ''}
            />
            {errors.supplierLocation && (
              <p className="error-message">{errors.supplierLocation.message}</p>
            )}
          </div>
        </div>

        <div className="form-group">
          <label>Show Price Details?</label>
          <div className="radio-group">
            <label>
              <input
                type="radio"
                value="yes"
                {...register('showPriceDetails')}
                defaultChecked={defaultValues?.showPriceDetails === 'yes'}
              />
              Yes
            </label>
            <label>
              <input
                type="radio"
                value="no"
                {...register('showPriceDetails')}
                defaultChecked={defaultValues?.showPriceDetails !== 'yes'}
              />
              No
            </label>
          </div>
          {errors.showPriceDetails && (
            <p className="error-message">{errors.showPriceDetails.message}</p>
          )}
        </div>

        {showPriceDetails && (
          <div className="form-grid grid-2">
            <div className="form-group">
              <label>Type:</label>
              <select
                {...register('priceType')}
                className={errors.priceType ? 'input-error' : ''}
              >
                <option value="">Select type</option>
                <option value="For Sale">For Sale</option>
                <option value="For Buying">For Buying</option>
              </select>
              {errors.priceType && (
                <p className="error-message">{errors.priceType.message}</p>
              )}
            </div>

            <div className="form-group">
              <label>Price:</label>
              <input
                type="number"
                {...register('price')}
                className={errors.price ? 'input-error' : ''}
                placeholder="Enter price"
              />
              {errors.price && (
                <p className="error-message">{errors.price.message}</p>
              )}
            </div>
          </div>
        )}
        <div className="form-group full-width">
          <h3>Endpoints</h3>
          {fields.map((endpoint, index) => (
            <div key={endpoint.id} className="form-grid grid-2">
              <div className="form-group">
                <label>Endpoint {index + 1}:</label>
                <input
                  {...register(`endpoints.${index}.endpoint`)}
                  placeholder={`Endpoint ${index + 1}`}
                  className={errors.endpoints?.[index]?.endpoint ? 'input-error' : ''}
                />
                {errors.endpoints?.[index]?.endpoint && (
                  <p className="error-message">
                    {errors.endpoints[index].endpoint.message}
                  </p>
                )}
              </div>

              <div className="form-group">
                <label>Status:</label>
                <select
                  {...register(`endpoints.${index}.status`)}
                  className={errors.endpoints?.[index]?.status ? 'input-error' : ''}
                >
                  <option value="">Select status</option>
                  <option value="Delivering">Delivering</option>
                  <option value="Delivered">Delivered</option>
                  <option value="Pending">Pending</option>
                  <option value="Delayed">Delayed</option>
                  <option value="Canceled">Canceled</option>
                </select>
                {errors.endpoints?.[index]?.status && (
                  <p className="error-message">
                    {errors.endpoints[index].status.message}
                  </p>
                )}
              </div>

              <button
                type="button"
                className="remove-endpoint-button"
                onClick={() => remove(index)}
              >
                Remove Endpoint
              </button>
            </div>
          ))}
          <button
            type="button"
            onClick={() => append({ endpoint: '', status: '' })}
            className="add-endpoint-button"
          >
            Add Endpoint
          </button>
        </div>

        <div className="form-actions">
          <button type="submit" className="action-button">Save</button>
          <button type="button" className="action-button">Back to List</button>
        </div>
      </form>
    </div>
  );
};
ItemTable.js import { Link } from 'react-router-dom';

export const ItemTable = ({ items = [] }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Category</th>
          <th>Quantity</th>
          <th>Location</th>
          <th>Supplier</th>
          <th>Supplier Location</th>
          <th>Price Type</th>
          <th>Price</th>
          <th>Endpoints</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {items.length > 0 ? (
          items.map((item) => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.category}</td>
              <td>{item.quantity}</td>
              <td>{item.location}</td>
              <td>{item.supplier || 'N/A'}</td>
              <td>{item.supplierLocation || 'N/A'}</td>
              <td>{item.showPriceDetails === 'yes' ? item.priceType : 'N/A'}</td>
              <td>
                {item.showPriceDetails === 'yes' && typeof item.price !== 'undefined'
                  ? item.price
                  : 'N/A'}
              </td>
              <td>
                {item.endpoints && item.endpoints.length > 0 ? (
                  <ul>
                    {item.endpoints.map((endpoint, index) => (
                      <li key={index}>{`${endpoint.endpoint} - ${endpoint.status}`}</li>
                    ))}
                  </ul>
                ) : (
                  <p>No endpoints available</p>
                )}
              </td>
              <td>
                <Link to={`/edit/${item.id}`}>Edit</Link>
              </td>
            </tr>
          ))
        ) : (
          <tr>
            <td colSpan="10">No items available</td>
          </tr>
        )}
      </tbody>
    </table>
  );
};
   
  CreateItemPage.jsx import { useNavigate } from 'react-router-dom';
import { createItem } from '../api';
import { ItemForm } from '../components/ItemForm';

export const CreateItemPage = () => {
  const navigate = useNavigate();

  const handleSubmit = (data) => {
    createItem(data).then(() => navigate('/'));
  };

  return (
    <div>
      <h1>Create Item</h1>
      <ItemForm
        onSubmit={handleSubmit}
        defaultValues={{ name: '', category: '', quantity: 1, tasks: [] }}
      />
      <button onClick={() => navigate('/')}>Back to List</button>
    </div>
  );
};
EditItempage.jsx import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { getItems, updateItem } from '../api';
import { ItemForm } from '../components/ItemForm';

export const EditItemPage = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [item, setItem] = useState(null);

  useEffect(() => {
    getItems().then((response) => {
      const foundItem = response.data.find((item) => item.id === parseInt(id));
      setItem(foundItem);
    });
  }, [id]);

  const handleSubmit = (data) => {
    updateItem(id, data).then(() => navigate('/'));
  };

  return item ? (
    <div>
      <h1>Edit Item</h1>
      <ItemForm onSubmit={handleSubmit} defaultValues={item} />
      <button onClick={() => navigate('/')}>Back to List</button>
    </div>
  ) : (
    <div>Loading...</div>
  );
};
ListItempage.jsx 
import { useEffect, useState } from 'react';
import { getItems } from '../api';
import { ItemTable } from '../components/ItemTable';
import { Link } from 'react-router-dom';

export const ListItemsPage = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    getItems().then(response => setItems(response.data));
  }, []);

  return (
    <div>
      <h1>Warehouse Items</h1>
      <ItemTable items={items} />
      <Link to="/create">Create New Item</Link>
    </div>
  );
};
api.js import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:5000',
});

export const getItems = () => api.get('/items');
export const createItem = (data) => api.post('/items', data);
export const updateItem = (id, data) => api.put(`/items/${id}`, data);
items.js 
export const warehouseItems = [
    {
     id: 1,
     name: "Laptop",
     category: "Electronics",
     quantity: 5,
     location: "Warehouse A",
     supplier: "TechCorp",
     supplierLocation: "New York",
     price: 1200,
     endpoints: [
      { endpoint: "Endpoint 1", status: "Pending" },
      { endpoint: "Endpoint 2", status: "Delivered" },
     ],
    },
    {
     id: 2,
     name: "Office Chair",
     category: "Furniture",
     quantity: 15,
     location: "Warehouse B",
     supplier: "FurniturePro",
     supplierLocation: "San Francisco",
     price: 350,
     endpoints: [
      { endpoint: "Endpoint 1", status: "Delivering" },
      { endpoint: "Endpoint 2", status: "Delayed" },
     ],
    },
    {
     id: 3,
     name: "Tennis Racket",
     category: "Sports",
     quantity: 20,
     location: "Warehouse C",
     supplier: "SportingGoods",
     supplierLocation: "Chicago",
     price: 150,
     endpoints: [
      { endpoint: "Endpoint 1", status: "Pending" },
      { endpoint: "Endpoint 2", status: "Canceled" },
     ],
    },
   ]; index.js import express from "express";
import cors from "cors";
import { warehouseItems } from "./Items.js";

const app = express();
app.use(cors());
app.use(express.json());

app.get("/items", (req, res) => {
 res.json(warehouseItems);
});

app.post("/items", (req, res) => {
 const newItem = { id: warehouseItems.length + 1, ...req.body };
 warehouseItems.push(newItem);
 res.status(201).json(newItem);
});

app.put("/items/:id", (req, res) => {
 const id = parseInt(req.params.id);
 const updatedFields = req.body;
 warehouseItems = warehouseItems.map((item) => (item.id === id ? { ...item, ...updatedFields } : item));
 res.json({ message: "Item updated" });
});

const PORT = 5000;
app.listen(PORT, () => {
 console.log(`Server running on port ${PORT}`);
});