Menu
I am building a Google Chrome browser extension that uses $.ajax requests to send data from webpages to my server (currently hosted using localhost). The content_script.js file that is being executed in the context of the webpages (more on content scripts) that the extension has access to runs this code:
//note: encode64String is assigned earlier in the script...
$.ajax({
type: "POST",
url: "http://localhost:8888/quartzsite/uploadendpoint.php",
type: "jsonp",
data: {img: encode64String},
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
success: function(data){
console.log("The ajax request succeeded!");
console.log("The result is: ");
console.log(data);
},
error: function(){
console.log("The request failed");
}
});
The problem is that the Ajax request is succeeding but the data argument that it returns is empty...
The console looks like this after the code is run:
Currently the contents of the uploadedendpoint.php file are:
<?php
header("Access-Control-Allow-Origin: *");
echo 'This comes from php file'; die();
?>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
This means there should be at least something being returned in the data variable.
I have further confirmed that the request is succeeding because when I send the request to a broken url (i.e. uploaddddddendpoint.php) the code inside the $.ajax's error parameter is executed.
I have read similar questions like jQuery $.ajax response empty, but only in Chrome but to no avail...
UPDATE:
I have removed the invalid second type: "jsonp" parameter entirely and have added dataType: "text/html". I am now getting a failed ajax request each time the code is run.
UPDATE: Strangely changing dataType : "text/html" to dataType : "html" causes the ajax request to succeed but again with a blank data variable.
UPDATE: When using the dev toolkit to monitor the Network XHR these are the sent/response messages:
With regards to the flag of possible duplication to Impossible to cross site ajax api calls in a chrome extension? I suggest otherwise! I have investigated that question and the problem does NOT seem to be the same.
749
Why do you have two type fields in your AJAX request? jsonp and POST.
$.ajax({
type: "POST", // OK
url: "http://localhost:8888/quartzsite/uploadendpoint.php",
type: "jsonp", // ???
// ...
});
UPDATE:
I think you should be using the relative path for the URL. Try changing your request to the following:
$.ajax({
type: "POST",
url: "/quartzsite/uploadendpoint.php",
dataType: "text/html",
data: {img: encode64String},
success: function(data){
console.log("The ajax request succeeded!");
console.log("The result is: ");
console.dir(data);
},
error: function(){
console.log("The request failed");
}
});
You can see I replaced the URL with /quartzsite/uploadendpoint.php. This may solve the problem... the absolute URL might signal a cross-domain request which is not what you're after.
Also, as a side note, it's unnecessary to set the contentType, since what you're setting it to is already the default value. If you were sending a JSON or XML, then you'd want to set the contentType.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
