Chris | Warawul Coffee GmbH Posts

Chris | Warawul Coffee GmbH

•Created by Chris | Warawul Coffee GmbH on 12/1/2023 in #general-help

Cloudflare redirect - CSS, Images, JS not working after redirect

Hi, I have written a website in Astro that is hosted on Cloudflare Pages. I have written redirect rules related to cookie values and country the visitors is from. The redirect itself works great. But it breaks the site's CSS, JS and image links. Is there a way to make the redirects work and not break the site? These are the redirect rules: If Expression

(ip.geoip.country ne "DE" and not http.cookie contains "userLang=de" and not starts_with(http.request.uri.path, "/en"))

(ip.geoip.country ne "DE" and not http.cookie contains "userLang=de" and not starts_with(http.request.uri.path, "/en"))

and Then Expression Dynamic

concat("https://",http.host,"/en",http.request.uri.path)

concat("https://",http.host,"/en",http.request.uri.path)

` and status code 302 And the other one has the If expression

(http.cookie contains "userLang=en" and not starts_with(http.request.uri.path, "/en"))

(http.cookie contains "userLang=en" and not starts_with(http.request.uri.path, "/en"))

Would be grateful for your help

7 replies

CDCloudflare Developers

•Created by Chris | Warawul Coffee GmbH on 11/27/2023 in #general-help

Cloudflare Redirect breaking CSS and JS

8 replies

CDCloudflare Developers

•Created by Chris | Warawul Coffee GmbH on 11/16/2023 in #pages-help

Script does not work with environmental variables

Hi, I am using this function to get contact form submit data and send it via sendgrid. However, once I change the API keys to environment variables it does not work anymore since it cannot get those environment variables from my pages directory. Do you have any ideas how to solve it?

export async function onRequestPost(context) {
  try {
    return await handleRequest(context);
  } catch (e) {
    console.error(e);
    return new Response("Error sending message", { status: 500 });
  }
}
async function handleRequest({ request }) {
  try {
    const ip = request.headers.get("CF-Connecting-IP");
    const formData = await request.formData();
   ...
    const token = formData.get("cf-turnstile-response");
    const tokenValidated = await validateToken(ip, token);
    if (!tokenValidated) {
      return new Response("Token validation failed", { status: 403 });
    }

    await forwardMessage(
      ...
    );

    return new Response("OK", { status: 200 });
  } catch (error) {
    console.error("Error handling request:", error);
    return new Response("Error handling request", { status: 500 });
  }
}

async function validateToken(ip, token) {
  const formData = new FormData();
  formData.append("secret", env.TURNSTILE_SECRET);
  formData.append("response", token);
  formData.append("remoteip", ip);

  const url = "https://challenges.cloudflare.com/turnstile/v0/siteverify";

  const result = await fetch(url, {
    body: formData,
    method: "POST",
  });

  const outcome = await result.json();
  console.log(outcome);
  return outcome.success;
}

async function forwardMessage(
  ...
) {
  console.log("Form Data:", {
    ...
  });
  try {
    const sendGridApiKey = env.SENDGRID_CONTACT_API;
    const sendGridEndpoint = "https://api.sendgrid.com/v3/mail/send";

    ....

export async function onRequestPost(context) {
  try {
    return await handleRequest(context);
  } catch (e) {
    console.error(e);
    return new Response("Error sending message", { status: 500 });
  }
}
async function handleRequest({ request }) {
  try {
    const ip = request.headers.get("CF-Connecting-IP");
    const formData = await request.formData();
   ...
    const token = formData.get("cf-turnstile-response");
    const tokenValidated = await validateToken(ip, token);
    if (!tokenValidated) {
      return new Response("Token validation failed", { status: 403 });
    }

    await forwardMessage(
      ...
    );

    return new Response("OK", { status: 200 });
  } catch (error) {
    console.error("Error handling request:", error);
    return new Response("Error handling request", { status: 500 });
  }
}

async function validateToken(ip, token) {
  const formData = new FormData();
  formData.append("secret", env.TURNSTILE_SECRET);
  formData.append("response", token);
  formData.append("remoteip", ip);

  const url = "https://challenges.cloudflare.com/turnstile/v0/siteverify";

  const result = await fetch(url, {
    body: formData,
    method: "POST",
  });

  const outcome = await result.json();
  console.log(outcome);
  return outcome.success;
}

async function forwardMessage(
  ...
) {
  console.log("Form Data:", {
    ...
  });
  try {
    const sendGridApiKey = env.SENDGRID_CONTACT_API;
    const sendGridEndpoint = "https://api.sendgrid.com/v3/mail/send";

    ....

5 replies

Gaming

Programming