CODEWITHSUNDEEP
javascriptapirestcurljira
rapturedDota
rapturedDota

Reputation: 23

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

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?

Upvotes: 2

Views: 1063

Answers (1)

Arash Motamedi
Arash Motamedi

Reputation: 10682

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.

Upvotes: 1

Related Questions