Chi Hao Comments - Answer Overflow

Topics

Chi Hao

Explore posts from servers

HHono DTDrizzle Team

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

hi that was very long time ago🤣, my solution was this. If you are using a front end framework like Astro, NextJS, Nuxt and etc, just set the cookie via the server side (API endpoints, server actions) instead of using hono to set the cookie. If you really want your hono backend to set cookie in your front end which is on another domain, just make sure to configure both to be on the same domain like localhost (but I did'nt managed to do this). Since I'm using Astro, the flow was like this Astro client side (call /api/csrf) --> astro server side (/api/csrf sets csrf cookie and return csrf token value) --> astro client side (call /api/backend with csrf token in header) --> astro server side (/api/backend checks whether csrf token header and cookie value is same then proceed to call hono in server side). So, actually the server side or api endpoint will be acting like a proxy server.

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

I thought both frontend and backend are in the same domain now but the cookie is still not set

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

for some reason this doesnt work, even though i can go to localhost:8787 on my browser, but i cant fetch from it. so i've decided to run my frontend on http://127.0.0.1:4321/testcsrf and my backend on http://127.0.0.1:8787 the route to set cookie is at http://127.0.0.1:8787/csrf, so i call this url in my frontend and I wonder why it doesnt set the cookie at http://127.0.0.1:4321. if I go to this url in my browser http://127.0.0.1:8787/csrf, it does set the cookie and at it shows domain 127.0.0.1. this is how I'm fetching in my frontend but the cookie is not set

      const response = await fetch("http://127.0.0.1:8787/csrf", {
        credentials: "include",
      });

      const response = await fetch("http://127.0.0.1:8787/csrf", {
        credentials: "include",
      });

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

i think im facing this issue https://stackoverflow.com/questions/12491750/localhost-doesnt-point-to-127-0-0-1#:~:text=Do%20the%20following%3A%20Go%20to%20-%3Ewindows-%3Esystem32-%3Eetc-%3Ehost,remove-%3E%20%3A%3A1%20localhost%20set-%3E%20127.0.0.1%20localhost

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

localhost:4321

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

this is my backend terminal when I run npm run dev

> [email protected] dev
> wrangler dev

 ⛅️ wrangler 3.57.1 (update available 3.59.0)
-------------------------------------------------------
Your worker has access to the following bindings:
- Vars:
⎔ Starting local server...
[wrangler:inf] Ready on http://127.0.0.1:8787
[wrangler:inf] GET / 200 OK (56ms)                                 
[wrangler:inf] GET /favicon.ico 404 Not Found (8ms)                
[wrangler:inf] GET /csrf 200 OK (8ms)

> [email protected] dev
> wrangler dev

 ⛅️ wrangler 3.57.1 (update available 3.59.0)
-------------------------------------------------------
Your worker has access to the following bindings:
- Vars:
⎔ Starting local server...
[wrangler:inf] Ready on http://127.0.0.1:8787
[wrangler:inf] GET / 200 OK (56ms)                                 
[wrangler:inf] GET /favicon.ico 404 Not Found (8ms)                
[wrangler:inf] GET /csrf 200 OK (8ms)

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

in my frontend, i can call http://127.0.0.1:8787 but why I cant call http://localhost:8787 ? however i can go to my browser at http://localhost:8787, and it will show me the response text. Does this mean i need to reconfigure my windows system to map localhost to 127.0.0.1 ?

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

oh I didnt know you can do this, could you guide me on how I can adjust my backend to run on localhost:8787 instead of 127.0.0.1? because currently the domain is being automatically set

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

since my astro is being deployed to cloudflare pages (mypage.com) and hono deployed to cloudflare worker (maybe i can set it to backend.mypage.com) however in local development, i dont think I can do something like subdomain?

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

I may not understand your suggestion clearly. my astro is at http://localhost:4321 and my backend is at http://127.0.0.1:8787. Do I call my api in my astro server side and use the astro server side to set the cookie value which I receive from my backend response?

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

even though astro can have it's own server side code but im just maintaining it so all the api are in hono

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

react, but currently im running the code at astro server side

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

astro

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

however it's not setting the cookie at http://localhost:4321/, so i wonder if it cannot set cookie at different domain

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

No description

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

however the cookie is still not in the list of cookies at http://localhost4321

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

this is the log for console.log(response.headers);

console.log(response.headers);
/* log
 Headers {
    Symbol(headers list): HeadersList {
      cookies: [ 'X-CSRF-Token=abc; Path=/' ],
      Symbol(headers map): Map {
        transfer-encoding: { name: 'Transfer-Encoding', value: 'chunked' },
        content-type: { name: 'Content-Type', value: 'text/plain; charset=UTF-8' },
        content-encoding: { name: 'Content-Encoding', value: 'gzip' },
        set-cookie: { name: 'Set-Cookie', value: 'X-CSRF-Token=abc; Path=/' },
        vary: { name: 'Vary', value: 'Origin' },
        access-control-allow-credentials: { name: 'access-control-allow-credentials', value: 'true' },
        access-control-expose-headers: {
          name: 'access-control-expose-headers',
          value: 'Content-Length,X-Kuma-Revision,Origin'
        }
      },
      Symbol(headers map sorted): null
    },
    Symbol(guard): 'immutable',
    Symbol(realm): null
  }
*/

console.log(response.headers);
/* log
 Headers {
    Symbol(headers list): HeadersList {
      cookies: [ 'X-CSRF-Token=abc; Path=/' ],
      Symbol(headers map): Map {
        transfer-encoding: { name: 'Transfer-Encoding', value: 'chunked' },
        content-type: { name: 'Content-Type', value: 'text/plain; charset=UTF-8' },
        content-encoding: { name: 'Content-Encoding', value: 'gzip' },
        set-cookie: { name: 'Set-Cookie', value: 'X-CSRF-Token=abc; Path=/' },
        vary: { name: 'Vary', value: 'Origin' },
        access-control-allow-credentials: { name: 'access-control-allow-credentials', value: 'true' },
        access-control-expose-headers: {
          name: 'access-control-expose-headers',
          value: 'Content-Length,X-Kuma-Revision,Origin'
        }
      },
      Symbol(headers map sorted): null
    },
    Symbol(guard): 'immutable',
    Symbol(realm): null
  }
*/

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

this is my frontend astro

// api.ts
  async getCSRFToken(): Promise<any> {
    try {
      const response = await fetch(this.backend_url + "/csrf");
      console.log(response.headers);
      return await response.text();
    } catch (error: any) {
      throw new Error("error in api.getCSRFToken: " + error);
    }
  }

  async checkCSRFToken(data: any): Promise<any> {
    try {
      const token = await this.getCSRFToken();
      console.log("frotendCSRFToken : ", token); 
      // log: frotendCSRFToken : 'abc'

      const response = await fetch(this.backend_url + "/testcsrf", {
        headers: {
          "X-CSRF-Token": token,
        },
      });
      return await this.sanitizeDataFetch(response);
    } catch (error: any) {
      throw new Error("error in api.checkcsrfpost: " + error.message);
    }
  }

// api.ts
  async getCSRFToken(): Promise<any> {
    try {
      const response = await fetch(this.backend_url + "/csrf");
      console.log(response.headers);
      return await response.text();
    } catch (error: any) {
      throw new Error("error in api.getCSRFToken: " + error);
    }
  }

  async checkCSRFToken(data: any): Promise<any> {
    try {
      const token = await this.getCSRFToken();
      console.log("frotendCSRFToken : ", token); 
      // log: frotendCSRFToken : 'abc'

      const response = await fetch(this.backend_url + "/testcsrf", {
        headers: {
          "X-CSRF-Token": token,
        },
      });
      return await this.sanitizeDataFetch(response);
    } catch (error: any) {
      throw new Error("error in api.checkcsrfpost: " + error.message);
    }
  }

// testcsrf.astro
---
import { api, widget } from "@/utils";

try {
  const { ok, errorMessage, data } = await api.checkCSRFToken({
    field1: "value1",
    field2: "value2",
  });

  if (!ok) {
    widget.alertError("custommessage", errorMessage);
  }
} catch (error) {
  throw new Error("Error in functionX: " + error);
}
---

// testcsrf.astro
---
import { api, widget } from "@/utils";

try {
  const { ok, errorMessage, data } = await api.checkCSRFToken({
    field1: "value1",
    field2: "value2",
  });

  if (!ok) {
    widget.alertError("custommessage", errorMessage);
  }
} catch (error) {
  throw new Error("Error in functionX: " + error);
}
---

41 replies

•Created by Chi Hao on 6/4/2024 in #help

unable to retrieve cookie value

this is my hono backend

app.get('/csrf', (c) => {
    setCookie(c, 'X-CSRF-Token', 'abc');
    return c.text('abc');
});

app.get("/testcsrf", (c) => {
  const csrfToken = getCookie(c, "X-CSRF-Token");
  console.log("csrf cookie: ", csrfToken);
  // csrf cookie:  undefined                                            
  const headerCsrfToken = c.req.header("X-CSRF-Token");
  console.log("headerCsrfToken: ", headerCsrfToken);
  // headerCsrfToken:  abc  
  
  if (csrfToken !== headerCsrfToken) {
    return c.json({ data: null, message: "Invalid CSRF Token" }, 403);
  }

  return c.json({ data: null, message: "ok" }, 200);
});

app.get('/csrf', (c) => {
    setCookie(c, 'X-CSRF-Token', 'abc');
    return c.text('abc');
});

app.get("/testcsrf", (c) => {
  const csrfToken = getCookie(c, "X-CSRF-Token");
  console.log("csrf cookie: ", csrfToken);
  // csrf cookie:  undefined                                            
  const headerCsrfToken = c.req.header("X-CSRF-Token");
  console.log("headerCsrfToken: ", headerCsrfToken);
  // headerCsrfToken:  abc  
  
  if (csrfToken !== headerCsrfToken) {
    return c.json({ data: null, message: "Invalid CSRF Token" }, 403);
  }

  return c.json({ data: null, message: "ok" }, 200);
});

41 replies

•Created by Chi Hao on 4/11/2024 in #help

update multiple rows is not working. PostgresError: column excluded.name does not exist

Thanks for the help!

6 replies