Blocked cross-origin request

Asked

Viewed 11,223 times

5

I am using an Elsevier API to fetch a book listing. To do this, I am using an example of them present at this link: http://apihtmlgen.elasticbeanstalk.com/sd_search.html I made my registration, I have my Apikey and I have 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 making the request gives me the following error "Request Cross-Origin blocked": inserir a descrição da imagem aqui

This error is about what? I am making this request on the link that has been logged, all right. What will be this mistake?

javascript html json web-service
  • 1

    CORS fault. Tries to set in your server settings Header always set Access-Control-Allow-Origin "*" or by changing the asterisk to the URL you are trying to access. Send a Request Header of the kind Origin by Javascrip may also be necessary.

  • @Brunoaugusto, I’ll look it up and I’ll give you the feedback. thanks

  • @Brunoaugusto, this is put in the server settings? in my case I am using Cpanel. Or it is put in a file . htaccess?

  • I know it’s CORS’s fault, but I’ve never experienced the problem. See if that article help you

  • @Brunoaugusto submit a request(GET) other than Origin? i just want to rescue the response from a php page by sending an id only that is another domain, to using XHR too, what to do?

  • Related question: How to make Ajax requests, with Jquery, in different domains?

Show 1 more comment

1 answer

1

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

My contacts with Apis over these years have been very few, so it may even be necessary to do something else.

Well... the closest I got to a successful requisition was by use JSONP.

The Request is made and an XML is returned because it is the API standard, but because it has been explicitly defined JSONP, jQuery tries to parse the response body, generating a Syntax Error after JSON is JSON and XML is XML.

And send any Request Header or define the argument httpAccept recognized by the API apparently is also ignored by jQuery.

I even tried to do an "XMLP", according to some topics on the SOEN, changing the dataType for:

dataType: 'jsonp xml'

But also without success.

Without using JSONP the browser automatically sends the header Origin with the address where the Request is leaving from, but the return is being a Status 500 because apparently the Elsevier server is not configured to accept requests crossdomain because it is not sending the header Access-Control-Allow-Origin with a wildcard (*) as a value.

Thus, any and all requests that do not depart from the API server, fail.

Although I know the CORS, I know him superficially and, as it seems to me that it is based on the Xmlhttprequest object I believe is something unique to Javascript.

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

If you have any functional consumption examples of this API, it would help you understand what is going on.

  • so if I order from the server side, for example using php, how can I do it? I have very little experience in this type of case. thanks

  • This is a bit outside the scope of the topic but since it seems to be a very simple API perfectly configurable by GET parameters, a file_get_contents() solves. Hence you read the answer, manipulate if necessary (JSON is easier) and echo something pro JS work. If you don’t need to manipulate you can directly echo what you receive as a response, XML or JSON, you who knows.

Browser other questions tagged javascript html json web-service

You are not signed in. Login or sign up in order to post.