Repository: axios
Issue: Request sends Twice returns HTTP 500 Error
Labels: state::triage

I send a POST request to a API server and the request sent 2 times. The initial request succeed because the records are inserted in the database then I get HTTP 500 response from the server. I have attached the error response and added the payload request. In the forms I have deleted the some of the inputs to make it readable here. 

Debug Console
**Preview Tab**
```
resource: [{code: "23000",…}]
0: {code: "23000",…}
code: "23000"
message: "SQLSTATE[23000]: [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]Violation of PRIMARY KEY constraint 'PK_Customers'. Cannot insert duplicate key in object 'dbo.Customers'. The duplicate key value is (James-1520). (SQL: insert into [dbo].[Customers] ([CustomerID], [SalesPerson], [LabName], [CreatedBy], [Deleted]) values (James-1520, 0, 1, James, James, Dr, , Kwaku Clinic, 115 Ave, Toronto, AB, M5B 2P7, , Canada, 6833733, james@test.com, More, 1, Prospects Form, 0))"
trace: [,…]
message: "Batch Error: Not all requested records could be created."
status_code: 500
```
**Server Logs**
[2022-06-30T16:34:27.114490+00:00] local.INFO: [RESPONSE] {"Status Code":500,"Content-Type":null} 
[2022-06-30T16:34:27.115436+00:00] local.INFO: [RESPONSE] {"Status Code":200,"Content-Type":null} 


 **Example code **
**Base URL**
```
import axios from "axios";

const apiClient = axios.create({
  baseURL: "https://*****",
  headers: {
    "X-API-KEY":"8888********",
    // "X--Application-Name": "testd",
    // "Access-Control-Allow-Origin": "*",
    // "Access-Control-Allow-Methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS",
    // "Access-Control-Allow-Headers": "Content-Type, Authorization",
    // "Access-Control-Allow-Credentials": true,
    "Content-Type": "application/json",
    Accept: "application/json",
    "access-control-allow-credentials": true,
    "access-control-allow-methods": "*",
    "access-control-allow-origin": "*",
    "access-control-allow-headers": "*",
    "cache-control": "no-cache",
    "cors-enabled": false,
  },
  // params: {},
});

export default apiClient;
```
```
import apiClient from "./apiBaseUrl";
const addCustomers = "_table/Customers/";
const addProspects = (_prospect) => {
  const resource = JSON.stringify([
    {
      labID: _prospect.labID,
      LabName: _prospect.labName,
      // deleted the  following lines because they are not needed
      Deleted: _prospect.deleted,
    },
  ]);
  console.log(resource);
  apiClient.post(
    addCustomers,
    resource
  
  );
  return apiClient.post(addCustomers, resource);
};

export default addProspects;
```
Form
```
/ Validation schema for the form
const validateSchema = Yup.object().shape({
  firstName: Yup.string().required().label("First Name"),
});

// Customer Id and Padding for the it
const strl = 30;
const initialNumber = 10;
const randomNumber = Math.floor(Math.random() * 100);
const custID = initialNumber + randomNumber + strl.toString().padStart(2, 3);

const Prospects = () => {
  // Function to handle the submit of the form
  const handleSubmit = async (values) => {
    const result = await apiEndPoints({
      ...values,
    });

    if (result.status >= 400 && result.status < 500) {
      console.log("400 Errors " + result.originalError);

    } else if (result.status >= 500) {

      console.log(result.config);
    } else if (result.problem) {

      console.log(result.config);
    } else {
      console.log("200 Success " + result.status);
    }
  };

  // Initial values for the form
  const initialValues = {
    active: false,
    prospect: true,
    customerID: custID,
    firstName: "",
 
  };

  return (
    <>

      <Layout>
        <div>
          <Formik
            initialValues={{
              ...initialValues,
            }}
            onSubmit={handleSubmit}
            validationSchema={validateSchema}
            enableReinitialize={true}
          >
            {({
              values,
              handleChange,
              handleBlur,
              handleSubmit,
            }) => (
              <form onSubmit={handleSubmit}>
                <Toast />
             
                  <div>
                    <label htmlFor="" className="relative block">
                      <span className="my-3"> Dr FirstName </span>
                      <input
                        type="text"
                        name="firstName"
                        id=""
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.firstName}
                      />
                    </label>
                  </div>
         
                <button
                  type="submit"
                  onClick={handleSubmit}
                >
                  Submit
                </button>
              </form>
            )}
          </Formik>
        </div>
      </Layout>
    </>
  );
};

export default Prospects;

```
#### Expected behavior
Expect only 1 request to be sent
Response of 200

#### Environment
 - Axios Version [0.27.2]
 - Adapter [XHR/HTTP]
 - Browser [Chrome, Edge]
 - Browser Version [ Edge 103.0.1264.37 (Official build) (64-bit), Chrome 03.0.5060.66 (Official Build) (64-bit)]
 - Node.js Version 
 - OS: [Windows 10]
 -  React 18.0.1

Screenshots
![image](https://user-images.githubusercontent.com/37945729/176737595-c762f123-a99d-4b56-9955-850cb3bc2299.png)

![image](https://user-images.githubusercontent.com/37945729/176739117-ea07a722-c014-472b-a7ea-73f0bce7a6a4.png)

![image](https://user-images.githubusercontent.com/37945729/176739353-8cc8aaa1-c272-4ea4-9c79-ac62436b5e83.png)