I’m stuck trying to link my Netlify frontend with my Heroku backend. The setup is a bit tricky:
- My git repo has both server and client code
- I deployed the server part to Heroku
- The whole repo went to Netlify, but I’m only building the client folder
I’ve gotten my Vue.js routing working with a _redirects file in the dist folder. But now I can’t figure out how to proxy API calls from Netlify to the Heroku backend.
My Heroku API is available at https://myherokuapp.herokuapp.com/api. I tried configuring a redirect in my _redirects file as follows:
/* /index.html 200
/api/* https://myherokuapp.herokuapp.com/api/:splat 200
Yet every API call returns ‘page not found’. Could the first line be interfering with the proxy settings? Any suggestions on resolving this would be greatly appreciated, as I’m still learning the ropes of deployment.
I encountered a similar issue when deploying a React app on Netlify with a separate backend. The problem might be in how Netlify handles rewrites and proxies. Instead of using the _redirects file, I found success by configuring the netlify.toml file in your project root. Try adding this:
[build]
command = “npm run build”
publish = “dist”
[[redirects]]
from = “/api/*”
to = “https://myherokuapp.herokuapp.com/api/:splat”
status = 200
force = true
This configuration should take precedence over other routing rules. Also, ensure your frontend code is using relative paths for API calls (e.g., ‘/api/endpoint’ instead of full URLs). If issues persist, double-check your CORS settings on the Heroku backend.
hey, this is an interesting issue. have you tried reorderin your redirects so that the api rule comes first?
im wonderin if netlify’s rewrite docs have more insights. what kind of reqests? GET, POST? curious to hear your thoughts.
have u tried using a proxy in ur package.json? somethin like:
“proxy”: “https://myherokuapp.herokuapp.com”
this way u can make requests to /api in ur code and itll forward to heroku. might be easier than messin with redirects. worth a shot!