Try to use cloudflare work embed got error

peteryang

hello, I try to use cloudflare work embed flarum got Oops! Something went wrong during a cross-origin request. Please reload the page and try again. how to fix it?

this is my work.js code

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);

  const targetUrl = `https://xxxx.com${url.pathname}${url.search}`;

  let response = await fetch(targetUrl, {
    headers: {
      'User-Agent': 'Mozilla/5.0 (compatible; Cloudflare Workers)'
    }
  });


  if (!response.ok) {
    return new Response('Error fetching the target URL', {
      status: 500
    });
  }

  let responseText = await response.text();

  responseText = responseText.replace(/(href|src)="\/([^"]*)"/g, '$1="https://xxxx.com/$2"');

  return new Response(responseText, {
    headers: {
      'Content-Type': 'text/html',
      'X-Content-Type-Options': 'nosniff',
      'Referrer-Policy': 'no-referrer',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
      'X-Frame-Options': 'ALLOWALL' 
    }
  });
}

function handleOptions(request) {
  return new Response(null, {
    status: 204,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    }
  });
}

clarkwinkelmann

peteryang can you describe what you are trying to do? I'm not familiar with that service.

For the cross-origin error, best is to open the development tools and look at the network tab. Since you seem to be doing some sort of proxy operation, it should be obvious which URLs Flarum tries to access over the original hostname rather than the proxy hostname. The Flarum single page app, its javascript and the Flarum API must be accessed over the same hostname for things to work, otherwise you will see that error message.

If you are proxying Flarum, you generally want to set the customer-facing hostname as the url value of config.php, not the hostname of your internal server behind the proxy. Then you don't need to rewrite any of the responses in the proxy, they will already contain the correct hostname for all CSS, javascript and API paths.

peteryang

clarkwinkelmann
Hello,I try to embedded flarum into an existing website?
Is it possible ?

clarkwinkelmann

peteryang the recommendation is to install Flarum in a subfolder or subdomain of your main website.

Using Flarum inside an iframe will severely limit its features and likely not work correctly on mobile devices. Even if you do embed Flarum, a reverse proxy is probably not required for that.

If you can tell us more about your stack we might be able to provide further guidance. What is your existing website hosted with/on? Do you plan on self-hosting Flarum? Are you trying to integrate accounts or other features between the 2 sites?