CORS issue when calling Netlify Function from Webflow website

I was wondering if anyone could run Netlify Functions from webflow site.

Here is a sample request that I try to trigger from webflow website:

fetch("https://brilliant-basbousa-e67359.netlify.app/api/test", {
  method: "POST"
})
  .then(response => response.text())
  .then(data => {
    // handle the response data
      console.log(data);
  })
  .catch(error => {
    console.warn("Something went wrong.", error);
  });

It can be tested with any webflow site through console.

As a result I receive the below:
Access to fetch at 'https://brilliant-basbousa-e67359.netlify.app/api/test' from origin 'https://**********.webflow.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Headers are already configured on Netlify end as per below, but the issue persists:

"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, OPTION",
"Content-Type": "application/json"

Was anyone able to resolve this issue with Netlify?

Hey, this should definitely be possible. Could you paste the code for your Netlify function?

Gosh, never tried that!

But I’d assume the answer is no, hence the CORS policy error with Netlify blocking you from their end.

I doubt they’d want their lambda functions run off any site not hosted on their platform.

Just use AWS instead, that’ll work!

Netlify won’t automatically expose your serverless lambda functions to the world. You need to specify what allowances you want to make for CORS.

I believe that’s configured in netlify.toml.

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"

I was able to resolve it by fixing CORS headers in the response on Netlify end:

const fetch = require("node-fetch");

  const API_ENDPOINT = "https://icanhazdadjoke.com/";
  
  const headers = {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, OPTION",
    "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, X-Requested-With"
  };

  exports.handler = async (event, context) => {
    return fetch(API_ENDPOINT, { headers: { Accept: "application/json" } })
      .then((response) => response.json())
      .then((data) => ({
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET, POST, OPTION",
            "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, X-Requested-With"
         },
        statusCode: 200,
        body: JSON.stringify({
            "test": "test"
          })
        //body: data.joke,
      }))
      .catch((error) => ({ statusCode: 422, body: String(error) }));
  };

@dmytro.yevdokymov interesting, never thought to take the approach you have.

So you have a Netlify hosted page (using the above CORS addition) calling a Netlify function like this:

await fetch('/.netlify/functions/my-cool-function', {});

Which in turn is called from your Webflow hosted site?