CORS issue when calling Netlify Function from Webflow website

Design help Custom code
1

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?

2

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

3

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!

4

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 = "*"
5

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) }));
  };
6

@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?