Foursquare returns 'No access control allow origin' header present error

Question

I am making a GET call to foursquare OAuth URL. Browser console prints the following error

XMLHttpRequest cannot load https://foursquare.com/oauth2/authenticate?client_id=DF4I1TGNVHAM40PDLOHZQZ…onse_type=code&redirect_uri=http://localhost:9000/auth/foursquare/callback. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

Here is the snippet making the call :

$http.get(url).success(function(data,status,headers,config){
});

But if I link a button to this url, browser takes me to the authentication page.

What difference does it make? Why it is working when the URL is linked to a button and why it is not working when GET call is made to that URL?

Answer 1

Ajax doesn't allow for a request from one domain to another domain unless unless the server provides an Access-Control-Allow-Origin (CORS) header. Linking between domains is allowed.

Mozilla has some good information as to what's allowed and what's not. https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Cross-origin_network_access

• Cross-origin writes are typically allowed. Examples are links, redirects and form sumissions. Certain rarely used HTTP requests require preflight.
• Cross-origin embedding is typically allowed such as images, scripts.
• Cross-origin reads are typically not allowed such as an ajax call