title: Ajax request succeeds but result is empty
body: <p>I am building a Google Chrome browser extension that uses <code>$.ajax</code> requests to send data from webpages to my server (currently hosted using localhost). The <code>content_script.js</code> file that is being executed in the context of the webpages (<a href="http://developer.chrome.com/extensions/content_scripts.html" rel="nofollow noreferrer">more on content scripts</a>) that the extension has access to runs this code:</p>
  
  <pre><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");
  }
  });
  </code></pre>
  
  <p>The problem is that the <code>Ajax</code> request is succeeding but the <code>data</code> argument that it returns is empty...</p>
  
  <p>The console looks like this after the code is run:<img src="https://i.stack.imgur.com/uBDFi.png" alt="enter image description here"></p>
  
  <p>Currently the contents of the <code>uploadedendpoint.php</code> file are:</p>
  
  <pre><code>&lt;?php
    header("Access-Control-Allow-Origin: *");
    echo 'This comes from php file'; die();
  ?&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Title of the document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  The content of the document......
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>This means there should be at least something being returned in the <code>data</code> variable.</p>
  
  <p>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 <code>$.ajax</code>'s <code>error</code> parameter is executed.</p>
  
  <p>I have read similar questions like <a href="https://stackoverflow.com/questions/3068808/jquery-ajax-response-empty-but-only-in-chrome">jQuery $.ajax response empty, but only in Chrome</a> but to no avail...</p>
  
  <p><strong>UPDATE</strong>:</p>
  
  <p>I have removed the invalid second <code>type: "jsonp"</code> parameter entirely and have added <code>dataType: "text/html"</code>. I am now getting a failed <code>ajax</code> request each time the code is run.</p>
  
  <p><strong>UPDATE</strong>: Strangely changing <code>dataType : "text/html"</code> to <code>dataType : "html"</code> causes the <code>ajax</code> request to succeed but again with a blank <code>data</code> variable.
  <strong>UPDATE</strong>: When using the dev toolkit to monitor the Network XHR these are the sent/response messages:</p>
  
  <p><img src="https://i.stack.imgur.com/Qkp55.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/xlTcu.png" alt="enter image description here"></p>
  
  <p>With regards to the flag of possible duplication to 
  <a href="https://stackoverflow.com/questions/11515031/impossible-to-cross-site-ajax-api-calls-in-a-chrome-extension">Impossible to cross site ajax api calls in a chrome extension?</a> I suggest otherwise! I have investigated that question and the problem does NOT seem to be the same.</p>