javascript - Forward body from request to another url - Stack Overflow

admin管理员组

文章数量:1431419

I am wondering if someone might be able to help figure out how to pass a post body to another endpoint with cloudflare workers? I am trying to get the ining request post to post to url.

const url = '/#!/b2f75ce2-7b9e-479a-b6f0-8934a89a3f3d'
const body = {
  results: ['default data to send'],
  errors: null,
  msg: 'I sent this to the fetch',
}

/**
 * gatherResponse awaits and returns a response body as a string.
 * Use await gatherResponse(..) in an async function to get the response body
 * @param {Response} response
 */
async function gatherResponse(response) {
  const { headers } = response
  const contentType = headers.get('content-type') || ''
  if (contentType.includes('application/json')) {
    return JSON.stringify(await response.json())
  } else if (contentType.includes('application/text')) {
    return response.text()
  } else if (contentType.includes('text/html')) {
    return response.text()
  } else {
    return response.text()
  }
}

async function handleRequest() {
  const init = {
    body: JSON.stringify(body),
    method: 'POST',
    headers: {
      'content-type': 'application/json;charset=UTF-8',
    },
  }
  const response = await fetch(url, init)
  const results = await gatherResponse(response)
  return new Response(results, init)
}
addEventListener('fetch', (event) => {
  return event.respondWith(handleRequest())
})

I am wondering if someone might be able to help figure out how to pass a post body to another endpoint with cloudflare workers? I am trying to get the ining request post to post to url.

const url = 'https://webhook.site/#!/b2f75ce2-7b9e-479a-b6f0-8934a89a3f3d'
const body = {
  results: ['default data to send'],
  errors: null,
  msg: 'I sent this to the fetch',
}

/**
 * gatherResponse awaits and returns a response body as a string.
 * Use await gatherResponse(..) in an async function to get the response body
 * @param {Response} response
 */
async function gatherResponse(response) {
  const { headers } = response
  const contentType = headers.get('content-type') || ''
  if (contentType.includes('application/json')) {
    return JSON.stringify(await response.json())
  } else if (contentType.includes('application/text')) {
    return response.text()
  } else if (contentType.includes('text/html')) {
    return response.text()
  } else {
    return response.text()
  }
}

async function handleRequest() {
  const init = {
    body: JSON.stringify(body),
    method: 'POST',
    headers: {
      'content-type': 'application/json;charset=UTF-8',
    },
  }
  const response = await fetch(url, init)
  const results = await gatherResponse(response)
  return new Response(results, init)
}
addEventListener('fetch', (event) => {
  return event.respondWith(handleRequest())
})

• javascript
• cloudflare-workers

Share Improve this question Follow edited Jan 27, 2022 at 18:51 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Jan 27, 2022 at 18:40 user17968935user17968935 3

• You want to get the body from the ongoing request and in turn POST it to another endpoint? – ffflabs Commented Feb 1, 2022 at 7:58
• @ffflabs yeah, looking for an example. – user17968935 Commented Feb 9, 2022 at 15:52
• For some reason, webhook.site doesn't forward the payload if it is received as multipart-formdata. Shows content-length = 0 and no payload is forwarded to the redirect url. – Om Gupta Commented Mar 14, 2023 at 7:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

I created a worker at https://tight-art-0743.ctohm.workers.dev/, which basically forwards your POST request's body to a public requestbin. You can check what is it receiving at: https://requestbin./r/en5k768mcp4x9/24tqhPJw86mt2WjKRMbmt75FMH9

addEventListener("fetch", (event) => {
  event.respondWith(
    handleRequest(event.request).catch(
      (err) => new Response(err.stack, { status: 500 })
    )
  );
}); 

async function handleRequest(request) {
  let {method,headers}=request,
      url=new URL(request.url)
  // methods other than POST will return early
  if(method!=='POST') return new Response(`Your request method was ${method}`);

  const forwardRequest=new Request("https://en5k768mcp4x9.x.pipedream/", request)
  forwardRequest.headers.set('X-Custom-Header','hey!')
  return fetch(forwardRequest)
}

You can see it working with a simple CURL request

curl --location --request POST 'https://tight-art-0743.ctohm.workers.dev/' \
--header 'Content-Type: application/json' \
--data-raw '{"environment": {"name": "Sample Environment Name (required)"}}'

Two things worth noting, in the worker's code:

1. I'm passing the original request as the init parameter, through which original headers and body are transparently forwarded to the requestbin, also allowing for some extra header manipulation if neeeded.
2. In this example I'm not actually doing anything with the request body. Therefore there's no need to await it. You just connect ining and outgoing streams and let them deal with each other.

Another example: let's add a /csv route. Requests starting with /csv will not forward your POST body. Instead they will download a remote CSV attachment and POST it to the requestbin. Again, we aren't awaiting for the actual CSV contents. We pass a handle to the response body to the forwarding request

async function handleRequest(request) {
  let {method,headers}=request,
    url=new URL(request.url)
  if(method!=='POST')     return new Response(`Your request method was ${method}`);

  const forwardRequest=new Request("https://en5k768mcp4x9.x.pipedream/",request)
  if(url.pathname.includes('/csv')) {
    const remoteSource=`https://cdn.wsform./wp-content/uploads/2018/09/country_full.csv`,
          remoteResponse=await fetch(remoteSource)
    return fetch(forwardRequest,{body:remoteResponse.body})
  }  
  forwardRequest.headers.set('X-Custom-Header','hey!')
  return fetch(forwardRequest)
}

While your code should theoretically work, the fact that you're unwrapping the response means your worker could be aborted due to hitting time limits, or CPU, or memory. On the contrary, when using the streams based approach, your worker's execution finishes as soon as it returns the forwarding fetch. Even if the outgoing POST is still running, this isn't subject to CPU or time limits.

Editing on ffflabs answer above

For an alternative syntax based on ES modules with Workers.

export default {
    async fetch(request: Request, env: any, ctx: ExecutionContext): Promise<Response> {
        return handleRequest(request).catch((err) => new Response(err.stack, { status: 500 }));
    },
};

async function handleRequest(request) {
  let {method,headers}=request,
      url=new URL(request.url)
  // methods other than POST will return early
  if(method!=='POST') return new Response(`Your request method was ${method}`);

  const forwardRequest=new Request("https://en5k768mcp4x9.x.pipedream/", request)
  forwardRequest.headers.set('X-Custom-Header','hey!')
  return fetch(forwardRequest)
}

Please follow the documentation here

本文标签： javascriptForward body from request to another urlStack Overflow