I am developing a software using reactJS where while fetching data from API using post method I was not able to fetch data [closed]

Below is the code in which I am facing error and unable to fetch data from the database using API. Also the request is being sent through the API but facing error to get data then I checked it on FIDDLER which showed error(mentioned below code) and is not showing any JSON output:

React component
AddOutlet.js:

import React, { useState } from 'react';
import './AddOutletStyle.css';
import { useNavigate } from 'react-router-dom';

const AddOutlet = () => {
  const [id, setId] = useState('');
  const [name, setOutletType] = useState('');
  const [discount, setDiscount] = useState('');
  const [responseMessage, setResponseMessage] = useState(''); // State to store the response message
  const Navigate = useNavigate();

  const handleIdChange = (e) => {
    setId(e.target.value);
  };
`your text`
  const handleOutletTypeChange = (e) => {
    setOutletType(e.target.value);
  };

  const handleDiscountChange = (e) => {
    setDiscount(e.target.value);
  };

  const handleSubmit = async () => {
    try {
      const response = await fetch('http://localhost:8080/v1/user/actor/provider/outlettype', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id, name, discount }),
      });

      if (response.ok) {
        // Success: Parse and store the response message
        const responseData = await response.json();
        setResponseMessage(responseData.message);

        // Navigate back to OutletTypes page after successful submission
        Navigate('/');
      } else {
        // Handle non-successful response (e.g., validation errors)
        console.error('Error adding outlet type:', response.status, response.statusText);
        setResponseMessage('Error: ' + response.statusText);
      }
    } catch (error) {
      console.error('Error adding outlet type:', error);
      setResponseMessage('Error: ' + error.message);
    }
  };

  return (
    <div className="add-outlet-container">
      <h1>Add Outlet</h1>
      <div className="input-container">
        <input
          type="text"
          placeholder="Enter ID"
          value={id}
          onChange={handleIdChange}
        />
        <input
          type="text"
          placeholder="Enter Outlet Type"
          value={name}
          onChange={handleOutletTypeChange}
        />
        <input
          type="text"
          placeholder="Enter Discount"
          value={discount}
          onChange={handleDiscountChange}
        />
        <button className="submit-button" onClick={handleSubmit}>
          Submit
        </button>
        {responseMessage && <p>{responseMessage}</p>}
      </div>
    </div>
  );
};

export default AddOutlet;

FIDDLER:
Raw file:

OPTIONS http://localhost:8080/v1/user/actor/provider/outlettype HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Accept: */*
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.69
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-Fetch-Dest: empty
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9

I tried by making changes in “handleSubmit” by using different ways of using fetch to fetch data using POST method, also made changes in “headers” by taking reference from some sources. I also tried by making changes in giving URL of API in different possible ways. Also checked API requests using fiddler.