6

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:enter image description here

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:

enter image description here enter image description here

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.

Community
  • 1
  • 1
Brannon
  • 1,286
  • 2
  • 21
  • 36
  • Try this on your first line of the php file: `` - Check if you get this in the console. – Sergio Aug 14 '13 at 22:24
  • what does the Network tab show? try removing `jsonp` type. – akonsu Aug 14 '13 at 22:25
  • 1
    go to the network pane of your chrome dev tools and see what the script returns – Prisoner Aug 14 '13 at 22:31
  • @akonsu I removed `type : "jsonp"` but no change. Originally I didn't specify a type but that didn't work so I thought that I would try `jsonp`. I will leave it typeless for now. The network tab shows only one failed `GET` request sent from `adzerk1_2_4_43,adzerk2_2_17_45?keywords=javascript,jquery...` but that seems to be from this page (I am testing it on stack right now). – Brannon Aug 14 '13 at 22:32
  • The network pane will only display data from the page you're no, not all windows. Open the dev tools on your test page. – Prisoner Aug 14 '13 at 22:33
  • are you doing cross domain request? – akonsu Aug 14 '13 at 22:34
  • @akonsu I am not but according to [this](http://developer.chrome.com/extensions/xhr.html) they should be allowed anyway. I also added `header("Access-Control-Allow-Origin: *");` to my code to allow them. – Brannon Aug 14 '13 at 22:45
  • possible duplicate of [Impossible to cross site ajax api calls in a chrome extension?](http://stackoverflow.com/questions/11515031/impossible-to-cross-site-ajax-api-calls-in-a-chrome-extension) – Rob W Aug 14 '13 at 22:57
  • @RobW I have my `permissions` in the manifest set to `http://*/*`. Is this incorrect? My `content_security_policy` is `"script-src 'self' http://localhost; object-src 'self' http://localhost"` Note I am not using `jsonp`. – Brannon Aug 14 '13 at 23:06
  • @RobW I do not find that to be the same question. – Brannon Aug 14 '13 at 23:24
  • @Prisoner I have updated the question with images from the dev tools! – Brannon Aug 14 '13 at 23:25
  • @Brannon, click response to see what your page returned. To be honest though, it seems like your call isn't the issue but something else. – Prisoner Aug 14 '13 at 23:26
  • @Prisoner the response is empty =/ – Brannon Aug 14 '13 at 23:27
  • @Brannon, and that's your problem. Somethings not getting through. – Prisoner Aug 14 '13 at 23:28
  • @Prisoner seems as much... Does that mean that data sent in `post` woun't get to the page? Any idea what would be causing this? – Brannon Aug 14 '13 at 23:30
  • @Brannon http cannot be whitelisted. Only https. Have you also checked my comment under the answer of the other question? – Rob W Aug 15 '13 at 07:58
  • 1
    @Brannon Re edit: The screenshot of the devtools suggests that your problem isn't related to JS/jQuery, but caused by something at your server's end. In your PHP snippet, you've set a response header. However, this header is absent in your screenshot. Also, `Content-Length: 0` indicates that the server's response is really **empty**. – Rob W Aug 16 '13 at 13:49

2 Answers2

2

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.

ktm5124
  • 11,861
  • 21
  • 74
  • 119
  • Nice catch! I have removed the "jsonp" type and added the correct `dataType`. The request is now failing altogether (which might actually indicate that it was previously giving a false positive). – Brannon Aug 14 '13 at 22:40
  • 1
    You shouldn't be using "jsonp" anywhere in your request. That is an advanced method for cross-domain requests and I doubt it's what you need. Do you still have that in there? – ktm5124 Aug 14 '13 at 22:41
0

Use "echo" instead of "return" while sending the response data to ajax.

sivaprakash
  • 65
  • 7