Actix web CORS error despite using Cors::permissive

Question

I'm making a simple note taking app with a backend written in actix and a frontend in svelte. I'm trying to implement starring notes:

Card.svelte

<script lang="ts">
...
export let data: Note; // Note is a simple dataclass
function changeStar() {
  data.starred = !data.starred;

  updateNote(data.id, {starred: data.starred});
}
</script>
...
<img
  class="control"
  src={!data.starred ? starPath : starHighlightedPath}
  on:click={changeStar}
  alt="Star icon"
/>
...

utils.ts

const URL = "http://0.0.0.0:8080";
...
export function updateNote(id: number, note: OptionalNote) {
  let temp = fetch(`${URL}/api/notes/${id}`, {
    method: "patch",
    body: JSON.stringify(note),
    headers: {
        'Content-type': 'application/json; charset=UTF-8',
    },
  })
    .then((response) => response.json())
    .then((json) => json);

  console.log(temp);
  return temp;
}

However when clicking the star I get a 2 CORS errors?

Error 2

Error 1

Starring posts "manually" (through Insomnia) works and after refreshing the page, the UI is updated fine. In main.rs I use the following CORS config:

App::new()
     .wrap(
         Cors::permissive() // <- Dont use this in production! (apparently)
     )
...

which is why I'm confused that I'm getting this error. Also, the frontend retrieves notes fine (I had a CORS error before I implemented the above snippet but adding it fixed that), which is doubly confusing.

Any help would be appreciated :)

Repo (instructions in README.md):

Project Repo

Answer 1

It turns out I needed to use uppercase "patch" in updateNotes

Corrected code:

export function updateNote(id: number, note: OptionalNote) {
  return fetch(`${URL}/api/notes/${id}`, {
    method: "PATCH",
    body: JSON.stringify(note),
    headers: {
        'Content-type': 'application/json; charset=UTF-8',
    },
  })
    .then((response) => response.json())
    .then((json) => json);
}

Thank you to @jub0bs for pointing this out!