REST API call succeeds from curl or python, but fails in browser

Question

I'm trying to build a website that requests JIRA data from a company-owned JIRA Board via REST API and displays the requested data in different graphs. While developing with JavaScript I ran into the CORS header 'Access-Control-Allow-Origin' missing error and therefore could not access the data. Here is some code:

var url = myUrl;
var auth_string = myJira_user + ":" + myJira_password;
var encoded_string = btoa(auth_string);
var http_headers = {
 "Content-Type": "application/json",
 Authorization: "Basic " + encoded_string
};
var headers = new Headers(http_headers);
fetch(url, headers)
 .then(response => {
 return response.json();
 })
 .then(data => {
 console.log(data);
 })
 .catch(err => {});

This JS script throws the above-mentioned error in my browser console, while a simple python script or curl command with the same parameters works and outputs data. How is that possible?

Answer 1

Modern browsers first check CORS policy on the API server via an HTTP OPTIONS call. This is known as "preflighting a request".

CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

HTTP OPTIONS: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

In effect, the browser first checks with the API server whether it has permission to call and consume APIs from the origin (website where the user is browsing from, identified by domain, protocol, and port). If the API server expects calls to be made from the origin, it returns a success response to the OPTIONS calls and then the browser proceeds to make the GET/POST/etc call. However, if the API server does not recognize the origin from the OPTIONS call, it will return a fail response, and the browser will not proceed with the API call and instead generates the exception you've observerd.

CORS + HTTP OPTIONS is one mechanism in the arsenal of securing API access and mitigating the plethora of security and privacy issues arising from Cross-Site-Scripting.

But to your point, CORS does not impact calls made from non-browser applications. A non-browser application, such as CURL or any code you can write in Python, Node, etc. does not make the OPTIONS calls and therefore, the API server's CORS policies do not apply.

You could setup a middleman/proxy server that receives API requests from your web application, call the target API server, and marshal back the response, therefore circumventing the CORS policy.

• rapturedDota: Thank you for your answer! I have been trying to find any information on how to setup a middleman/proxy server but was not successful yet. Can you provide any details on how to do that?
• Arash Motamedi: The simplest solution would be for you to create a backend, expose some APIs (for example: myapp.com/getCard?cardId={cardId}). The code on your backend would then call JIRA's endpoint and pass the right headers and parameters, get the response back and return it to your web app). This might be the quickest approach if you only need to consume a handful of APIs. If you need a full replica, then maybe a more dynamic approach is necessary, e.g. some kind of reverse proxy server (look into nginx)
• Krishna Vaddepalli: You could try installing CORS extension on browser for testing