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
CodePudding user response：
You have two options:
- 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.
- 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.