Netlify React App unable to fetch from Heroku Rails API

Support
, ,
#1

This is my first time deploying, so my apologies if this is a basic question. I recently (successfully) deployed my React front end here: https://bread-box-react.netlify.app/ and my backend Rails API here: https://breadbox-app-api.herokuapp.com/api/v1

Currently, both pages load, but when I navigate, I get the dreaded CORS error.

Access to fetch at 'https://breadbox-app-api.herokuapp.com/api/v1/get_current_user' from origin 'https://bread-box-react.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

My repo/code can be found here: https://github.com/amfosh/bread-box

I am really at a loss. All of my fetch requests are pointed to the right place & my cors.rb file has my Netlify app as the origin. Any insight would be super helpful!!

#2

Hey @amfosh, welcome to the forum :slight_smile:

I think your options are to either set your origins to “*”, or try adding a _redirects file where you’ll proxy to your endpoint:
/api/* https://breadbox-app-api.herokuapp.com/api/v1/:splat 200

You’ll add the _redirects file in the directory you publish to Netlify, or you can add the redirect in a netlify.toml file that lives in your project root (not necessarily your “publish” directory).

Here are the docs on that:

Want to give one of those a shot and let us know how it goes?

#3

Hey @amfosh,
Not sure if you’re still working on this project or issue, but wanted to share a related thread, recently resolved, that you may find helpful or interesting: Blocked by CORS. React SPA on Netlify. Rails API on Heroku