Cloudflare Developers•5mo ago

self fetching on workers and client sides

I am writing a fetch request that can be called from both the server and client with the following code. I am using Nuxtjs 3.

const {data, error } = await useAsyncData(
     'API_FORWARD_UID', (): Promise<IUIDGetResponse> => $fetch(`${config.public.baseUrl}/api/forward/${uid}`, {
       method: 'GET'
     })
)

const {data, error } = await useAsyncData(
     'API_FORWARD_UID', (): Promise<IUIDGetResponse> => $fetch(`${config.public.baseUrl}/api/forward/${uid}`, {
       method: 'GET'
     })
)

It works normally in the local develop environment, but when uploaded to Cloudflare worker, Error 522 occurs. I would like to know if you have any information about this.

1 Reply

몰라세스•5mo ago

if use service bindings, Are there any reserved words to describe yourself? In language, isn't there a variable called this that represents the object itself? I would like to know if there is a word that can be used to bind to the worker itself like that. Why are you asking? It doesn't seem to be recognized properly when I do the following:

services = [
     { binding = "SELF", service = "sh0rt-kr" }
]

services = [
     { binding = "SELF", service = "sh0rt-kr" }
]

const {data, error } = await useAsyncData(
  'API_FORWARD_UID', async (): Promise<IUIDGetResponse> => {
      if (process.client)
        return await $fetch(`${config.public.baseUrl}/api/forward/${uid}`, {
          method: 'GET'
        })
      else return await cloudflare.env.SELF.patch(`/api/forward/${uid}`, {
        method: 'GET'
      })
    }
)

const {data, error } = await useAsyncData(
  'API_FORWARD_UID', async (): Promise<IUIDGetResponse> => {
      if (process.client)
        return await $fetch(`${config.public.baseUrl}/api/forward/${uid}`, {
          method: 'GET'
        })
      else return await cloudflare.env.SELF.patch(`/api/forward/${uid}`, {
        method: 'GET'
      })
    }
)

The code was changed as follows: On the server side, fetch to the bound worker. It seems there is one last problem left. Worker binding works well, but I'm not sure how to send a request to a specific URL. it has solved. this codes:

const event = useRequestEvent()
const cloudflare = event?.context!!.cloudflare!!

const {data, error } = await useAsyncData(
  'API_FORWARD_UID', async (): Promise<IUIDGetResponse> => {
      if (process.client || process.dev)
        return await $fetch(`${config.public.baseUrl}/api/forward/${uid}`, {
          method: 'GET'
        })
      else {
        const data =  await cloudflare.env.SELF.fetch(`${config.public.baseUrl}/api/forward/${uid}`, {
          headers: {
            'Content-Type': 'application/json',
          },
          method: 'GET'
        })
        return await data.json()
      }
    }
)

const event = useRequestEvent()
const cloudflare = event?.context!!.cloudflare!!

const {data, error } = await useAsyncData(
  'API_FORWARD_UID', async (): Promise<IUIDGetResponse> => {
      if (process.client || process.dev)
        return await $fetch(`${config.public.baseUrl}/api/forward/${uid}`, {
          method: 'GET'
        })
      else {
        const data =  await cloudflare.env.SELF.fetch(`${config.public.baseUrl}/api/forward/${uid}`, {
          headers: {
            'Content-Type': 'application/json',
          },
          method: 'GET'
        })
        return await data.json()
      }
    }
)

and worker bindings.

Gaming

Programming

self fetching on workers and client sides