Fetch with process.env.URL not working in deployment preview

Support
1

Netlify deployment preview url of a page impacted by the error (continue through checkout process to payment details): Data Strategy Professionals

Trying to fetch from one Netlify Lambda function to another.

This code works fine in dev but not in the deployment preview. I’m getting a “502 Bad Gateway” error. Can someone help me understand what I’m doing wrong?

In the Netlify function handle-payment-intent.js, I’m calling

async function calculateShippingAndTaxes(intent, address) {
  try {
    const shippingResponse = await fetch(process.env.URL + "/.netlify/functions/calculate-shipping", {
      method: "POST",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Content-Type",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        address,
        paymentName: intent.description,
      }),
    });

    const shippingData = await shippingResponse.json();
    const shippingAmt = shippingData?.shipping_cost?.amount;

    const taxResponse = await fetch(process.env.URL + "/.netlify/functions/calculate-taxes", {
      method: "POST",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Content-Type",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        price: intent.amount,
        address,
        paymentName: intent.description,
        shippingAmt,
        taxCode: intent?.metadata?.taxCode, // txcd_99999999 (General - Tangible Goods)
      }),
    });

I think I don’t understand why process.env.URL isn’t where the calculate-shipping and calculate-taxes live… Thanks in advance!!

2

Oh, and here’s my entire netlify.toml in case that helps.

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
# Define which paths this specific [[headers]] block will cover.
for = "/*"
  [headers.values]
  Access-Control-Allow-Origin = "*"
  
[build]
  functions = "functions" # netlify dev uses this directory to scaffold and serve your functions
  publish = "build"

[dev]
  command = "npm run start"
  port = 8888
  targetPort = 3000
  publish = "dist" 
  autoLaunch = true
  framework = "create-react-app"

[functions]
  directory = "functions"
  node_bundler = "esbuild"
  external_node_modules = ["@mailchimp/mailchimp_marketing", "dotenv", "sib-api-v3-sdk", "stripe"]
  included_files = ["./src/data/**"]
3

Have you checked your function logs:

image
image1953×544 91.9 KB

Function details | Functions | Logs | hungry-noyce-fb652c | Netlify

Looks like you’re not getting a correct JSON from your other function.

4

Yes, that’s correct, but that’s not the source of this issue.

I ended up hardcoding in the deploy-preview url — is that the only way to fix?

5

Here’s what I worked out as a slightly more elegant solution:

let baseURL = process.env.URL ? process.env.URL : "https://deploy-preview-45--hungry-noyce-fb652c.netlify.app";
baseURL += "/.netlify/functions/";
6

You can always get the URL from the function itself. For example: new URL(event.rawUrl).origin.

7

Thanks very much for the help