title: How to call local endpoint from button click with SvelteKit
body: <p>I can't get my svelte page named <code>card.svelte</code> to call the post method in the <code>card.js</code>.</p>
  <pre><code>  &lt;script&gt;
    export let habit
    import { Client } from &quot;@notionhq/client&quot;;
    
    //change color of card when clicked
    async function updatePage() {
      habit.green = !habit.green;
      let res = await fetch('formdata', {
        method: 'post',
        headers: {        
          'content-type': 'application/json'
          },
        body: 'test'
      });
      const json = await res.json();
      result = JSON.stringify(json);
      
      console.log(result);
      console.log('update habit');
      return {
        status: result.code,
        body: results
      }
    }
  &lt;/script&gt;
  &lt;form on:submit|preventDefault={updatePage}&gt;
  &lt;div class='card' class:selected={habit.green}&gt;
    &lt;div class='habit-title'&gt;{habit.name}&lt;/div&gt;
    &lt;button type=&quot;submit&quot;&gt;Test&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>I get the following error on the chrome console</p>
  <pre><code>Fetch failed loading: POST &quot;http://localhost:3000/formdata&quot;.
  </code></pre>
  <p>Here's my <code>card.js</code> file.</p>
  <pre><code>    import { Client } from &quot;@notionhq/client&quot;;
  
  /** @type {import('@sveltejs/kit').RequestHandler} */
  export function post(request, params, url) {
    // log all headers
    console.log(&quot;ITS WORKING&quot;);
  
    return {
      body: {
        // retrieve a specific header
        test: &quot;test&quot;,
      },
    };
  }
  </code></pre>
  <p>No errors on terminal.</p>
  <p>What am I doing wrong?</p>
  <p>My end goal is to call an external API (Notion API) from server-side. But, I can figure the rest out if I can just figure out how to make a button on the svelte page call the local backend api.</p>
  <p>Is there an easier way to do this?</p>
  <p>forgive me for my ignorance!</p>