I’m trying to link my Netlify frontend with a Heroku backend. Both are in the same git repo. I’ve set up Netlify to build only the client folder using netlify.toml:
[build]
base = "client"
I added a _redirects file in the dist folder for Vue.js routing. Now, I need to proxy API calls from Netlify to my Heroku backend at https://myherokuapp.herokuapp.com/api.
I tried the following in the _redirects file:
/* /index.html 200
/api/* https://myherokuapp.herokuapp.com/api/:splat 200
But I’m receiving 404 errors. Is it possible that the /* /index.html 200 line is interfering with the API calls? Any suggestions on how to resolve this issue?
hey there! I had a similar issue. try changing the order of ur redirects:
/api/* https://myherokuapp.herokuapp.com/api/:splat 200
/* /index.html 200
this way, API calls get handled first. if that doesn’t work, double-check ur heroku app URL and make sure CORS is set up correctly on the backend. good luck!
hmmm interesting setup! have u considered using netlify functions instead? they can act as a proxy for ur API calls. might be easier to manage. also, whats ur vue.js config look like? sometimes that can interfere with routing. curious to hear more about ur project!
I’ve encountered this issue before when working on a similar project. One approach that worked for me was to use Netlify’s proxying feature instead of relying solely on the _redirects file. In your netlify.toml, you can add a [[redirects]] section like this:
[[redirects]]
from = ‘/api/*’
to = ‘https://myherokuapp.herokuapp.com/api/:splat’
status = 200
force = true
This configuration takes precedence over the _redirects file and should route your API calls correctly. Additionally, ensure your Vue.js app is using relative paths for API calls (e.g., ‘/api/endpoint’ instead of ‘应用宝官网-全网最新最热手机应用游戏下载’). This setup allows Netlify to handle the proxying seamlessly without affecting your frontend routing.