Issue with proxied function api call

Support
1

My site https:lprime.netlify.com, which was working, is now returning 404. I redeployed the site without error, but still 404.

I’m sure there’s a server log somewhere, but I can’t recall how to get to it.

2

Hi @JeffML!

The cause of the 404 is most likely a missing index.html file. See the post for more info: [Support Guide] I’ve deployed my site but I still see "Page not found”

3

No that wasn’t it. I was misremembering how I had this implemented. The correct site is: https://lprimeui.netlify.com/

This page will load (no 404) but is calling the lprime site which implements Netlify Functions. What I am seeing is a CORS issue:

Access to fetch at ‘https://lprime.netlify.com/.netlify/functions/primes?startAt=10&endingIn=1&iterations=1’ from origin ‘https://lprimeui.netlify.com’ 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.

I wasn’t seeing this until recently. So, the question is: how do I set the Access-Control-Allow-Origin header in Netlify functions? Maybe there’s an answer somewhere else…

7

Hi, @JeffML. My colleague @Dennis has made the following suggestion to others that have asked this question:

You’ll want to make sure your function include the following response header:

Access-Control-Allow-Origin: * (or the domain that the request will be coming from)

You’re callback would look something like:

callback( null, {
    statusCode: 200,
    headers: { "Access-Control-Allow-Origin": "*" }
    body: JSON.stringify(body)
  })

Does that solution meet your requirements?

9

Hi Luke,

I set [[headers]] in my netlify.toml file to set the ACAO value to “*”. Not sure if that did anything, but if I look at the network request, I see:

image

So it looks like the access control is correct. Why the 404? Now I’m looking at what is in my source repository, and see that there my function file (primes.js) is missing!

Anyhow, I should be able to figure out why. Thanks, Luke.

10

Just a follow up. I had headers set similar to the snippet you posted. Still not sure how I saw that CORS issue, but there were other problems, mostly due to my not testing the callback before I deployed. Now things are working again.