Issues with CORS policy and OAuth

[nicklevenson]

I wanted to use Hotwire for a project and it was working great! However, it was somehow causing an issue with OAuth. I tried using rack-cors to get around this, but to no avail. The only thing that remedied the issue was uninstalling Hotwire. I am more of a newbie coder so forgive me if this isn't directly Hotwire's issue. Here was the error message:

Access to fetch at 'https://www.facebook.com/v4.0/dialog/oauth?client_id=421663072224232&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Ffacebook%2Fcallback&response_type=code&scope=email&state=882733bb125ed010d102ca5b1ef08f94264d6edbf4f800e6' (redirected from 'http://localhost:3000/auth/facebook') from origin 'http://localhost:3000' 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.

[firrae]

Ha! I actually had this EXACT issue recently. CORS isn't the answer.
simi/omniauth-facebook#356 (comment)

The solution I used was to make it a button and flag it as data-turbo: 'false' basically disabling Turbo for that element's interactions. Then Facebook worked for me. There are other things in that thread that might help you on other things though as I see you are also going to V4. If you just made the application in Facebook you're likely on V9 as I am, so you'll need to update the config for that as well potentially.