Blocked by CORS. React SPA on Netlify. Rails API on Heroku

[jamesncox]

I have a React app hosted on Netlify, https://buy-where.netlify.app/, trying to fetch to my Rails API hosted on Heroku, https://buy-where.herokuapp.com/api/v1. I am getting blocked by a CORS policy, even though I have it configured exactly the same as another Netlify app with a Rails API hosted on Heroku, https://memes-vs-gifs.netlify.app/.

Here is an example of the CORS error (same error for any of my endpoints):

Access to fetch at ‘https://buy-where.herokuapp.com/api/v1/auth_check’ from origin ‘https://buy-where.netlify.app’ has been blocked by CORS policy: 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.

Here is my public/_redirects file:

/api/* https://buy-where.herokuapp.com/api/v1/:splat 200
/*  /index.html  200

And in my Rails API initializers/cors.rb file:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins ['http://localhost:3001', 'https://buy-where.netlify.app/']
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      credentials: true
  end
end

I’m not sure what else to do. Thanks for any help anyone is able to offer!

[jen]

Hey @jamesncox,
Those origins look correct to me, so I don’t think that’s the issue. Have you checked out some of these gotchas?

GitHub - cyu/rack-cors: Rack Middleware for handling Cross-Origin Resource...

If that turns out to not be helpful, let us know and we’ll keep digging.

[jen]

One other thought: can you try deleting the localhost origin so that the line is just origins 'https://buy-where.netlify.app/' (so, no array) and seeing how that goes?

[jamesncox]

I just tried removing the localhost origin, and it didn’t affect (improve) the issue. About to read through the gotchas resource you just referenced. And thank you for responding and helping so quickly!

[jamesncox]

Just read through the gotchas, and looked at the middleware stack as suggested by the resource, and the positioning of Rack::Cors appears to be where the author suggests it is safest (positioned at the top of the stack)

[jamesncox]

@jen also, did I mention that it works totally fine when I fire up my development server?

http://localhost:3001/ is the url allowed in my cors.rb file, and I just fired it up, and it’s working perfectly. That leads me to believe my backend is configured correctly as well, but obvioulsy I could be wrong.

[jen]

Mysteries! Might be worth digging into the headers when POSTing from the site that doesn’t work vs the one that does.

buy-where:
Updated screenshot of POST to a correct endpoint

Memes Vs Gifs
In this one, the response is served by Server: Cowboy (heroku)

[jamesncox]

Ok this is interesting. I’ll see if I can figure out how to get the server to come from Heroku as well. Not entirely sure how to go about debugging this. But a great learning opportunity! Thank you for your continued help

[jamesncox]

@jen

Very strange. I inspected the headers, several types of requests, including POST request, and I’m showing “cowboy” (heroku) as the server.

[jen]

Oh no! You’re right, that was my mistake. I’ll update the screen shot I posted above with one that’s instead a POST to Buy / Where. Either way, still no Access-Control-Allow-Origin header (or the other headers set in rack-cors and present in the memes-vs-gifs site request) in either of ours

[jamesncox]

Do I need to create a proxy with a netlify function? (I believe it’s something like that). I’ve never used Netlify functions before and I should probably learn them at some point. Is this a good use case for creating a proxy?

[luke]

Hi, @jamesncox. I just tested the sign-up and I don’t see the CORS errors now.

Did you resolve the issue? If not, please let us know how to reproduce the error (or I’ll ask @jen how to do so).

On the other hand, if you did resolve it, please feel free to share the solution here as it may be helpful for another person searching for answers in the future.

[jamesncox]

Hi @luke, thank you for your response! The short answer is, YES. I resolved the issue.

The long and embarrassing answer is it was a VERY DUMB mistake on my Rails API side. You will notice a forward slash “/” appended to the URL in my cors.rb file that I shared as an image and code snippet above. That final forward slash was causing my actual site URL to be blocked.

I am so glad that it was that simple, but super embarrassed how much of my own and other’s time I wasted trying to figure this out. I guess the one good takeaway is I feel more confident than ever to try and build my first even Netlify function to try and hide a few secret API keys in other projects.

[jen]

Wow, who would’ve guessed that a / would ruin everything!? Great learning for us as well, really appreciate you sharing your findings.

And glad to hear you’ll be giving functions a shot! Let us know if we can help with anything.

[DakotaLMartinez]

Thanks so much for sharing this! I was having the exact same issue with my rails API on Digital Ocean and removing the closing / from the URL fixed the issue!

[SamO]

yay! I’m happy you found a solution in our community even if it was three years later haha! Good luck and happy building.