How to create proxy on Netlify functions?

[winstonma]

I would like to build a website. Due to the CORS problem I would need a proxy for all my requests. I would like to use Netlify Functions as the proxy.

Instead of writing several Netlify Functions that make requests to different servers, I would like to create a Netlify Functions that serves as a proxy and make all requests using that proxy Netlify Functions.

I’d like to know if there are some Netlify Functions sample code that serves as proxy? Thanks in advance.

[jen]

Hey @winstonma,
This person had a similar question. Do you want to take a look at the suggestion there and let us know if it works for you or if you have questions?

CORS when connecting to self-hosted gitlab

Hey @AnaTofuZ, The best fix would be to add the “Access-Control-Allow-Origin” header on the Gitlab side, to enable your origin (https://ie.u-ryukyu.ac.jp) to access it. We don’t know the answer to whether that’s possible but Gitlab support should! If it turns out to not be possible to add that header, I’d suggest reviewing this article about proxying your requests through a Netlify Function: Here is the function you’ll call from your page: Let us know if this helps or if you have addit…

[winstonma]

Thanks @jen

The CORS problem is not only in the dev environment but also in publish environment. So I am afraid that doesn’t work.Therefore I would like to have a proxy in netlify function. I would look like this

Input: .netlify/xxx/http://www.google.com

Then the netlify function would parse the URL (http://www.google.com) on behalf of the browser and return the parsed value back to the browser. This would be running in the production site.

[jen]

Hey @winstonma,
I know the title of that post says it’s only for Netlify Dev, but you’d publish the same function to production and be in business! The way it works is:

1. you call the function
2. the function makes the API request
3. the function returns the API response to you

If you want to do something more like what you described, you could try something like:

[[redirects]]
from="/call-proxy/*"
to="/.netlify/functions/whatever-your-function-name/:splat"
status=301

and log the url using console.log(event.path).

Let us know how it goes!

[winstonma]

@jen Thanks for the reply. I will give it a try.

[winstonma]

@jen Actually I don’t want to do my proxy thing. I just want to get the API called directly from the browser and have no CORS problem.

[winstonma]

@jen I tried the fetch in the link you posted. It worked flawlessly.

However when I tried to replace https://icanhazdadjoke.com with my URL, the error comes. So I guess this fetch way won’t work for me.

Currently I have a netlify function that already work but I still think putting all the fetching logic in the front end and then build a proxy function would allow me to maintain less code.

[Dennis]

If you are having CORS issues, then your URL is probably not set up to handle requests that originate from a different domain. You’ll need your URL to include an “Access-Control-Allow-Origin” header like @jen mentioned. So if you want to do the fetch directly on the client-side, you’ll need to modify your URL to include that header with a value that allows your site to access the response from it.

[winstonma]

@Dennis Thanks for the response. I understand this is not Netlify related thus I tried to build a proxy function that allows me to get the result from the API call.

But in reality, I am fetching the information in the third-party server using a node module. I am not sure if it is possible for me to clear up the CORS issue using their npm module. Therefore the proxy method comes into my mind.

[Dennis]

Right, so your function should include the header I mentioned with a value that includes the domain you are calling it from. Doing so should resolve your CORS issue. Hope that helps.