I have the following Javascript code to make a XMLHttpRequest to a server:
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
return xhr;
}
function makeCorsRequest(word) {
var url = "https://localhost:8080/Method/Dictionary/" + word;
var xhr = createCORSRequest('GET', url);
xhr.onload = function() {
var responseText = xhr.responseText;
document.querySelector("#bar").innerHTML = responseText;
};
xhr.onerror = function() {
document.querySelector("#bar").innerHTML = 'Connection not allowed';
};
xhr.send();
}
makeCorsRequest("word");
At the server, I've got a REST structure (written using Jersey) similiar to:
@Path("/Dictionary")
public class Main{
public Definition returnDefinition(String word){
Definition definition = new Definition();
try{
...//play with Definition object
return definition;
}
catch(IOException IOE){
...
return definition;
}
}
@Path("{word}")
@GET
@Produces("text/xml ; charset=UTF-8") //"Definition" is already set as a XMLRoot element
public Definition main (@PathParam("word") String word){
return returnDefinition(word);
}
}
I try to make this request in two environments:
First environment: The JS code is inside a normal web page. In this case, I receive the following error after trying to make the request:
XMLHttpRequest cannot load http://localhost:8080/Method/Dictionary/word. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Second environment: The JS code is inside a content script (that is itself inside a chrome extension). In this case, after about 30s of trying to make the request, I receive this:
Failed to load resource: net::ERR_TIMED_OUT
How to proceed?
EDIT: I've added a command to print something at the console in the beginning of the server method. And it is not printed. So, the requests are not reaching the server.
