POST 403 Forbidden Django Vue Js

Question

I am using Vue JS and Django Rest Framework and I am trying to add a feature to add a blog post. I am not sure why I am getting a 403 forbidden error in the console. I am getting the following error: Forbidden (Origin checking failed - http://localhost:8080 does not match any trusted origins.) Any direction would be appreciated

I am not sure if this is a CORS related error but I have CORS_ALLOWED_ORIGINS = ['http://localhost:8080'] in my settings.py. I have also enabled the middleware. I have a login page that works and assigns the user a token when logged in (I am using djoser). I have made sure that the user has permissions to add a blog entry.

here is my code for submitform if relevant:

        submitForm() {
        const postData = {
        title: this.title,
        author: this.author,
        body: this.body,
        };
        
        const token = localStorage.getItem('token'); // Retrieve the authentication token from local storage

        axios.post('/api/v1/posts/add-post/', postData, {
          headers: {
            Authorization: `Token ${token}`, // Include the token in the request headers
          },
        }) 
        .then(response => {
            console.log(response.data);
            // Handle success, e.g., show a success message or navigate to another page
        })
        .catch(error => {
            console.log(error);
            // Handle error, e.g., show an error message to the user
        });