Cross-origin request blocked

Question

Cross-origin request blocked

Navigation

#1 by (1 votes)

5

I'm using an Elsevier API to fetch a book listing. To do this, I'm using an example from them at this link: link I did my registration, got my APIkey and got the following code:

<html>
<head>
<title>Elsevier ScienceDirect Search via APIs</title>
<link rel="icon" type="image/png" href="images/favicon.ico" />
<script>
var xsl="";
var xml="";

function loadXMLDoc(dname) {
    if (window.ActiveXObject) {
        xhttp=new ActiveXObject("Msxml2.XMLHTTP.3.0");
    }
    else {
        //alert ("in ActiveXObject ELSE condition");
        xhttp=new XMLHttpRequest();
    }

    xhttp.open("GET",dname,false);
    xhttp.send("");
    return xhttp.responseXML;
}

function displayResult()
{
    xml="";
    var key="20d0c__________________________adb"; // API key value
    document.getElementById("sd_results").innerHTML="";

//alert("in displayResult()");
var x = document.getElementById("form1");
var val = x.elements[0].value;

var apiReq="http://api.elsevier.com/content/search/index:SCIDIR?query="+val+"&apiKey="+key+"&xml-decode=true&httpAccept=application%2Fxml";

if (xsl == "") {
    xsl=loadXMLDoc("sd_results_webkit.xsl");
}

//alert('getting xml');
xml=loadXMLDoc(apiReq);

// code for IE
if (window.ActiveXObject)
  {
    var ex='';
  ex=xml.transformNode(xsl);
  document.getElementById("sd_results").innerHTML=ex;
  }
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml,document);
  document.getElementById("sd_results").appendChild(resultDocument);
  }

}

function formReset() {
    document.getElementById("form1").reset();
}

function displayPage(link) {
    xml="";
    document.getElementById("sd_results").innerHTML="";

var apiReq=link;

if (xsl == "") {
    xsl=loadXMLDoc("sd_results_webkit.xsl");
}

//alert('getting xml');
xml=loadXMLDoc(apiReq);

// code for IE
if (window.ActiveXObject)
  {
    var ex='';
  ex=xml.transformNode(xsl);
  document.getElementById("sd_results").innerHTML=ex;
  }
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml,document);
  document.getElementById("sd_results").appendChild(resultDocument);
  }

}
</script>
<title>Elsevier ScienceDirect Search API</title>
</head>
<body onload="formReset();return false;">
<form id="form1" onkeypress="return event.keyCode != 13;">
<b>Please enter search keywords separated by space:</b>&nbsp;<input type="text" name="query" style="width:200px"/></form>
<input type="submit" onclick="displayResult();return false;" value="Search" />

<div id="sd_results"></div>

</body>
</html>

What happens, is that when ordering gives me the following error "Cross-Origin blocked request":

This error is with what? I'm making this request on the link that was registered, all right. What will this error be?

javascript html json web-service

asked by anonymous 21.11.2014 / 11:58

1 answer

Problems using Java classes in Oracle Database Increment input values in +1 containing letters and numbers using JQuery?

score 1 · Answer 1

This response is another great comment to maybe help the OP and the other user with the same problem.

My contacts with APIs over these years have been very few, so it might even be that something more is needed.

Well ... The closest I got to a Success Request was using JSONP .

The request is made and an XML is returned because it is the default API, but because it has been explicitly defined JSONP, jQuery tries to parse the response body, generating a Syntax Error after all JSON is JSON and XML is XML. / p>

And send any Request Header or set the link argument recognized by the API seems also to be ignored by jQuery.

I even tried to make an "XMLP", according to a few topics in SOEN, changing the dataType to:

dataType: 'jsonp xml'

But also to no avail.

Without using JSONP, the browser automatically sends the Origin header with the address where the Request is departing, but the return is a Status 500 because apparently the Elsevier server is not configured to accept crossdomain requests because you are not sending the Access-Control-Allow-Origin header with a wildcard as a value.

So, any request that does not depart from the API server fails.

Although I know CORS, I know it superficially and, as it seems to me that it is based on the object XmlHttpRequest I think is something unique to JavaScript.

Assuming this to be the case, I suggest that if no one else can help you, you use a server-side language to consume this API, and perhaps use JS to request the data asynchronously from your own application.

If you have some functional example consumption of this API, it would help to understand what is going on.