CORS Issues Executing Get Requests Using Axios/Github

Question

I'm trying to authenticate over OAUTH API using Axios. The initial request is just a simple GET to get the auth token.

  axios.get(
    "https://github.com/login/oauth/authorize?client_id=$ID"
  ).then((res) => { console.log(res) })

I immediately get:

...from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I can use an href link and it works totally fine. What could be the issue here?

You should check this answer here: https://stackoverflow.com/a/25845455/1360383 — glrodasz, Mar 07 '19 at 04:42
@glrodasz This doesn't help explain why href works and ajax doesnt — John Lippson, Mar 07 '19 at 04:45
If what you are trying to accomplish is consume OAuth Endpoint, I'm pretty sure that the service should have some config like ALLOWED ORIGINS. — glrodasz, Mar 07 '19 at 04:45
For security reasons, AJAX is more powerful and you can not just do GET verbs, but you could do POST. So the idea of CORS is avoid non desired clients to perfom operations in your APIs. href is just for open a new page, so any link is valid. — glrodasz, Mar 07 '19 at 04:47
I'm saying, I get no failures using an href link, yet it fails when using this axios call. How does that make any sense? Both from same origin, but performing a get request. — John Lippson, Mar 07 '19 at 04:48
Element works very different to AJAX. You need to take into account that element is controlled by the render engine of the browser (Blink, WebKit, etc) but instead JavaScript as a programming language can perform other operations. It 's not like you are going to hurt anything with a link, but instead with AJAX as I said you can perform a POST. CORS is not just for GET petitions, is enabled for any type of request from JavaScript code. — glrodasz, Mar 07 '19 at 04:52

score 0 · Answer 1 · answered Mar 07 '19 at 09:28

0

In simple terms, when you are using the anchor tag, it is a link to the original site. When user click on a tag, user will be redirected to that site. But when an AJAX request user will stay in your site and sends an ajax request to the server(github in this case).

When using HTTP protocol there is a header call origin which will tell the backend server where user is from, see the below picture

So if server does not allow sources other than it self, this security check will be failed and the AJAX request won't be success. Please let me know if you need more clarifications and I'll be glad to help. Hope that helps.

answered Mar 07 '19 at 09:28

Janith

2,730
16
26

Gotcha, so is href the only way to achieve this? – John Lippson Mar 07 '19 at 15:06
1

If you want to do this in java script you can redirect programmatic, `window.location.href = "http://stackoverflow.com";`. – Janith Mar 08 '19 at 03:56

CORS Issues Executing Get Requests Using Axios/Github

1 Answers1