Difference href and $.get

I have a link on my webpage that goes to "/auth/facebook"

<a href='/auth/facebook'>Log In with Facebook</a>

This works fine.

I need to do the same thing in Js in a react component. This is the code

<a className='btn btn-primary btn-outline'
   role='button'
   onClick={() => $.get('/auth/facebook')}>

   Sign up/in to buy

</a>

When the Onclick is triggered the console outputs an error as if I was trying to execute a cross site request.

XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…Fauth%2Ffacebook%2Fcallback&scope=public_profile&client_id=XXXX. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

My understanding is that both the link and the $.get call should go to my server "localhost" and trigger the same route. What is the difference between the two calls?

Answers:

Answer

$.GET is just going to load data from the server (assuming it worked, and didn't throw a CORS error). It doesn't handle redirection. If for some reason you can't use the href attribute, you can do something like:

onClick={() => window.location.href = '/auth/facebook'}

Since it looks like you're using react, you might also benefit from using a router module like react-router (https://github.com/ReactTraining/react-router), which exposes a <Link> component to keep your UI in sync with the URL.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.