Search code examples
javascriptreactjsapipostnetlify

How to proxy API REST calls : (FE hosted on Netlify)?

When I am going to post a call it is working fine locally and I am able to make the access with netlify but once I am hosting the front end app from Netlify the the POST Proxy is getting set to the netlify URL

The hosted URL : https://deploy-preview-14--hungry-lovelace-df4f46.netlify.app/login

One we click on Sign Up and click on Signup then I see the POST method is going to https://abc/register

where I need it to go to https://xyztrial.com/register

In local I made it work by adding Proxy: 'xyztrial.com.com' in the Package.json

But once I host it I am not able to post the call, what should I do ?

Screenshot for the same has been added as well as the above URL it can be done online.

Because of which I am getting 404 error Page not found

Solution

  • You have two options:

    1. You use the NODE_ENV env variable to switch the base URL from dev to prod, and you use that in your api calls:
    const baseURL = process.env.NODE_ENV === "development" ? "localhost:5000" : "https://nameofyourapp.herokuapp.com" 

const endpoint = "/api/v1/get-posts"

fetch(baseURL + endpoint)
... 
...

    This way you won't need proxying in package.json during dev and it will automatically switch in production to your backend URL.

    1. Use Netlify Proxies:

    Proxy to another service Similar to how you can rewrite paths like /* to /index.html, you can also set up rules to let parts of your site proxy to external services. Let’s say you need to communicate from a single-page app with an API on https://api.example.com that doesn’t support CORS requests. The following rule will let you use /api/ from your JavaScript client:

    /api/* https://api.example.com/:splat 200

    Now all requests to /api/... will be proxied through to https://api.example.com straight from our CDN servers without an additional connection from the browser. If the API supports standard HTTP caching mechanisms like ETags or Last-Modified headers, the responses will even get cached by our CDN nodes.

    https://docs.netlify.com/routing/redirects/rewrites-proxies/#proxy-to-another-service

    Just remember to enable CORS and place your netlify origin as allowed on your heroku server.