Cloudflare Developers•6mo ago

Submit form to Worker to store in R2

I've have been dealing with this for hours now and I'm so sick of this Worker code Literally copy and pasted from the docs as what I wrote would not work, but this doesn't work either.

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const key = url.pathname.slice(1);

    switch (request.method) {
      case 'PUT':
        await env.R2.put(key, request.body);
        return new Response(`Put ${key} successfully!`);
      case 'GET':
        const object = await env.R2.get(key);

        if (object === null) {
          return new Response('Object Not Found', { status: 404 });
        }

        const headers = new Headers();
        object.writeHttpMetadata(headers);
        headers.set('etag', object.httpEtag);

        return new Response(object.body, {
          headers,
        });
      case 'DELETE':
        await env.MY_BUCKET.delete(key);
        return new Response('Deleted!');

      default:
        return new Response('Method Not Allowed', {
          status: 405,
          headers: {
            Allow: 'PUT, GET, DELETE',
          },
        });
    }
  },
};

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const key = url.pathname.slice(1);

    switch (request.method) {
      case 'PUT':
        await env.R2.put(key, request.body);
        return new Response(`Put ${key} successfully!`);
      case 'GET':
        const object = await env.R2.get(key);

        if (object === null) {
          return new Response('Object Not Found', { status: 404 });
        }

        const headers = new Headers();
        object.writeHttpMetadata(headers);
        headers.set('etag', object.httpEtag);

        return new Response(object.body, {
          headers,
        });
      case 'DELETE':
        await env.MY_BUCKET.delete(key);
        return new Response('Deleted!');

      default:
        return new Response('Method Not Allowed', {
          status: 405,
          headers: {
            Allow: 'PUT, GET, DELETE',
          },
        });
    }
  },
};

My Form Code

  const form = document.getElementById('reComments')

  form.addEventListener('submit', (e)=>{
    e.preventDefault();
    onSubmit(form);
  });

  function onSubmit(form){
    const formData = new FormData(form);

    fetch('https://URL-HERE.workers.dev', {
      method: 'PUT',
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      body: formData
    })
    .then(response => response.text())
    .then(data => console.log(data))
    .catch(error => console.log(error));

    console.log(`This is the data from the website being sent to cloudflare:`, formData);
  };

  const form = document.getElementById('reComments')

  form.addEventListener('submit', (e)=>{
    e.preventDefault();
    onSubmit(form);
  });

  function onSubmit(form){
    const formData = new FormData(form);

    fetch('https://URL-HERE.workers.dev', {
      method: 'PUT',
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      body: formData
    })
    .then(response => response.text())
    .then(data => console.log(data))
    .catch(error => console.log(error));

    console.log(`This is the data from the website being sent to cloudflare:`, formData);
  };

1 Reply

EdOP•6mo ago

These are the errors I'm getting in console XHR OPTIONS https://URL-HERE.workers.dev/

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://URL-HERE.workers.dev/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 405.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://URL-HERE.workers.dev/. (Reason: CORS request did not succeed). Status code: (null).

I'm not familiar with dynamic web content, I only have experience with static websites please help, been trying to get this to work for hours now...

Gaming

Programming

Submit form to Worker to store in R2