Javascript 404 error when trying to access API call

Question

I am trying to alter some data inside of my database, however I am getting the error once my api request is called:

Uncaught (in promise) SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)

Along with the corresponding network error of 404. I am not quite sure why it isn't recognnizing my api call, here is the initial fetch call:

import fetch from '../../../../core/fetch/fetch.server';
import history from '../../../../core/history';

export default function checkIn(orderId) {
  debugger;
  return async (dispatch, getState) => {
      // dispatch({ type: BOXOFFICE_CHECKING_IN });
      const response = await fetch(`/api/orders/${orderId}/checkIn`, {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            checkedIn: true,
          }),
        }
      );

      if (response.status === 200) {
        // dispatch({ type: BOOKING_CHECKED_IN });
      } else {
        const errorResponse = await response.json();
        if (errorResponse.code === 'card_error') {
          // dispatch({ type: BOXOFFICE_CHECKED_IN_ERROR });
        }
      }
    } catch (err) {
      throw err;
    }
  };
}

And my api file (removed everything that isn't relevant):

import { Router } from 'express';


import checkIn from '../handlers/api/orders/checkInCustomer';


export default (resources) => {
  const router = new Router();

  router.post('/orders/:orderId/checkIn', checkIn(resources));



  return router;
};

Which ultimately is meant to call my js file that changes the data databse entry:

import { defaultTo } from 'lodash';
import guuid from '../../../../../../core/guuid';
import authenticateAdmin from '../authenticateAdmin';
import order from '../../../../client/reducers/ui/modals/order';

export default ({ knex }) =>
  authenticateAdmin(knex)(async (req, res) => {
    try {
      console.log('checkinCustomer');
      const { orderId } = req.params;
      const { isCheckedIn } = req.body;

      console.log(orderId);
      console.log(isCheckedIn);

      await knex('orders').where('is_checked_in', '=', orderId).update({ is_checked_in: isCheckedIn }).where({ id: orderId });

      res.status(201).end();
    } catch (err) {
      console.error(err.stack || err);
    }
  });

Can anyone spot something that is fundamentally wrong in my code, I can assure you the file paths are all correct and all functions are visible to each other, maybe it's the way I have parsed my data?

EDIT

I thought it maybe of use to include that I am also getting a CORS error:

Access to XMLHttpRequest at 'http://localhost:3000/api/orders/c7216fc0-1197-4cb6-99d4-15760f00b6e7/checkIn' from origin 'my site name' has been blocked by CORS policy:

FURTHER EDIT

I have managed to remove the original JSON error, however I am still getting the 404 network error as well as the original CORS error... In addition to this, if I change the last section of the fetch from checkIn to say cancel which is a fully working api call, the same errors persist.

Answer 1

I have a solution! Turns out my import fetch from '../../../../core/fetch/fetch.server'; in the initial file was wrong and should have been import fetch from '../../../../core/fetch/fetch';!