Not sure why my frontend and backend aren't connecting; is it an API issue? Help pls - node.js

Question

The issue is that the connection doesn't seem to be going through. The error log doesn't show anything: there's no sign data is being sent to the database. E.g. when I log in, or sign up, I can see that I'm doing that in the console. No dice here.
Vue component:
<script>
import KitchenAssignment from "../models/kitchenAssignment";
export default {
name: 'sendAssignment',
data(){
return {
kitchenAssignment: new KitchenAssignment('', '', '', '')
};
},
methods: {
submitForm(){
this.$store.dispatch('auth/saveAssignment')
}
}
}
</script>
Pertinent bit of my auth.service.js file:
import axios from 'axios';
const API_URL = 'https://appname.herokuapp.com/api/auth/';
...
saveAssignment(kitchenAssignment){
return axios.post(API_URL + 'kitchenAssignments', {
kAName: kitchenAssignment.kAName,
startTime: kitchenAssignment.startTime,
endTime: kitchenAssignment.endTime,
minRoleRequired: kitchenAssignment.password
})
}
My routes file:
const { authJwt } = require("../middleware"); // nothing in here yet, just trying to be sure i can actually send data to database
const controller = require("../controllers/kitchenAssignment.controller.js");
module.exports = function(app) {
app.use(function(req, res, next) {
res.header(
"Access-Control-Allow-Headers",
"Origin, Content-Type, Accept"
);
next();
});
app.post('/api/auth/kitchenAssignments', controller.saveAssignment);
};
My controller file:
const db = require("../models");
const KitchenAssignment = db.kitchenAssignment;
const Op = db.Sequelize.Op;
//const { default: kitchenAssignment } = require("../../vue-vuex-jwt-auth-master/src/models/kitchenAssignment");
exports.saveAssignment = async (req, res) => {
try {
const kitchenAssignment = await KitchenAssignment.create({
kAName: req.body.kAName,
startTime: req.body.startTime,
endTime: req.body.endTime,
minRoleRequired: req.body.minRoleRequired
});
}
catch (error) {
res.status(500).send({ message: error.message });
}
}
Not sure it's relevant, but here's my input area for the user in the .vue component? Maybe it's incorrect somehow.
<template>
<div class="container">
<header class="jumbotron">
<h3>{{content}}</h3>
<div>
<input v-model="kitchenAssignment.kAName"
placeholder="Input kitchen assignment name."
/>
<input v-model="kitchenAssignment.startTime"
placeholder="Input start time."
type="time"/>
<input v-model="kitchenAssignment.endTime"
placeholder="Input end time."
type="time"/>
<input
v-model="kitchenAssignment.minRoleRequired"
placeholder="Select minium role required."
v-validate="'required|pattern:^(Kitchen Leader|Sous Chef|Line Cook|Junior Cook|Dishwasher)$'"
name="minimum role required"
/>
<button #click="submitForm">Enter</button>
</div>
</header>
</div>
</template>
Would appreciate any help. I've tried a lot of stuff, can't recall everything but it led me to this point. Been reading up on Apis to no avail.