Axios post to an api getting response error 401 after clicking on the submit button

Question

I have a listing page and a separate add record page (MainCreate) in where I want to post a new record to the JSON api hosted on jsonstorage extendclass.com

So this is my MainCreate.vue code (I will also give here one object so you can see the structure)

<template>
    <b-container class="my-4">
        <b-row>
            <b-col>
                <h3>Log a New Dive</h3>
            </b-col>
        </b-row>
        <b-row>
            <b-col>
                <b-form id="myform" @submit.prevent="diveData" method="post">
                    <b-form-group id="input-group-1" label="Dive Id:"  label-for="dive_id">
                        <b-form-input type="text" id="input-1" name="dive_id" v-model="dives.dive_id" placeholder="Enter id" ></b-form-input>  
                    </b-form-group>
                    <b-form-group id="input-group-2" label="Dive Number:"  label-for="dive_number">
                        <b-form-input type="text" id="input-2" name="dive_number" v-model="dives.dive_number" placeholder="Enter Dive #" ></b-form-input>  
                    </b-form-group>      
                    <b-button type="submit" variant="primary">Submit</b-button>
                </b-form>
            </b-col>
        </b-row>
    </b-container>
</template>

const postUrl = "https://json.extendsclass.com/bin/d6af4c8c4829"; // request URL
const token = "1234"; // access token
var axiosHeaders = {
  headers: {
    "secret-key": token
  },
};
export default {
  name: "MainCreate",
  data() {
    return {
      dives: {
        dive_id: null,
        dive_number: null
      }
    }
  },
  methods: {
    diveData(e) {
       this.axios.post(postUrl, this.dives, axiosHeaders).then((response) => {
        this.dives = response.data.dives;
        console.warn(response);
      }, () => {
        e.preventDefault();
      }).catch((error) => {
        console.log(error)
      })
      e.preventDefault();
    }
  },
}

I have a listing page that is working just fine and loading all the data. "get" is working fine.

What am I missing? Here is one JSON Object

{
  "dives": [
    {
      "dive_id": 1,
      "dive_number": "0001",
      "dive_date": "05/22/2020",
      "dive_time": {
        "time_value": 55,
        "time_unit": "min"
      },
      "dive_depth": {
        "distance_value": 53,
        "distance_unit": "ft"
      },
      "dive_type": "Reef",
      "dive_note": "Some Long description here about the dive. Some Long description here about the dive Some Long description here about the dive Some Long description here about the dive Some Long description here about the dive",
      "_showDetails": false,
      "dive_location": {
        "country": "USA",
        "dive_site": "Lake Phoenix, Rawlings, Virginia"
      },
      "dive_site_conditions": {
        "visibility": {
          "distance_value": 43,
          "distance_unit": "ft"
        },
        "air_temp": {
          "temp_value": "73°",
          "temp_unit": "F"
        },
        "surface_temp": {
          "temp_value": "73°",
          "temp_unit": "F"
        },
        "bottom_temp": {
          "temp_value": "73°",
          "temp_unit": "F"
        },
        "water_type": "Salt",
        "water_access": "Shore",
        "water_movement": "Surge",
        "water_roughness": ""
      },
      "air_specs": {
        "start_psi": {
          "air_value": "3000",
          "air_unit": "psi"
        },
        "end_psi": {
          "air_value": "500",
          "air_unit": "psi"
        },
        "computer_dive": "Sunto D5",
        "rdp": "No",
        "rebreather": "No"
      },
      "dive_plan": {
        "pressure_g1": "A",
        "s_interval": "21:00",
        "pressure_g2": "G",
        "safety_stop": {
          "time_value": 5,
          "time_unit": "min"
        },
        "residual": {
          "rnt": "xxx",
          "abt": "yyy",
          "tbt": {
            "time_value": 43,
            "time_unit": "min"
          }
        },
        "gas": {
          "air_eanx": {
            "gas_percentage": "32",
            "gas_start_value": " ",
            "gas_start_unit": "",
            "gas_end_value": "",
            "gas_end_unit": ""
          },
          "rebreather_o2": {
            "gas_percentage": "",
            "gas_start_value": " ",
            "gas_start_unit": "",
            "gas_end_value": "",
            "gas_end_unit": ""
          },
          "bailout_eanx": {
            "bailout_gas_percentage": "",
            "gas_start_value": " ",
            "gas_start_unit": "",
            "gas_end_value": "",
            "gas_end_unit": ""
          },
          "scrubber_time": {
            "start_time_value": "123",
            "start_time_unit": "min",
            "used_time_value": "22",
            "used_time_unit": "min",
            "remain_time_value": "22",
            "remain_time_unit": "min"
          }
        },
        "time_in": "09:30 AM",
        "time_out": "calculate",
        "weight": {
          "weight_value": 30,
          "weight_unit": "lb"
        }
      },
      "protection": {
        "suit_type": "Dry",
        "hood": "yes",
        "gloves": "yes",
        "boots": "yes"
      }
    }
]
}

Thanks for your help!

Answer 1

I think the second parameter should be data followed by the headers

this.axios.post(postUrl,this.dives, axiosHeaders).then(response=>{
//do something
})

//this may also works
 axios({
  method: 'post',
  postUrl,
  this.dives,
  axiosHeaders
});

Answer 2

I think the second argument to axios.post is always the data you are trying to send and not the headers.

Headers is the third argument like so:

axios.post(url, data, {
    headers: headers
  })
  .then()
  .catch();