PDA

View Full Version : Resource interpreted as Document but transferred with MIME type application/json



lorezyra
17 Jul 2015, 2:11 AM
I suspect my problem is on the server-side, but I have not found the correct solution... My problem is the JSON response getting treated as text/html... Despite having the PHP header for application/json...

Using ExtJS 4.2.4.1676.

login.php:


header("Expires: Mon, 26 Jul 2012 00:00:01 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");


header("Content-Type: application/json; charset=UTF-8");


header("Content-Disposition: inline; filename=LoginResponse.json");
header("Access-Control-Allow-Origin", "*");
header("Access-Control-Allow-Methods", "POST,GET");
header("Access-Control-Allow-Headers", "Content-Type");


// logic..


header("Content-Length: " . strlen($response));
echo $response;


app/controller/ADlogon.js::onKVHlogonClick: function(button, e, eOpts) {


var me = this,
loginForm = me.getLoginForm().getForm();

if (loginForm.isValid()) {

//prevent Rabbit Clickers
button.setText("Authenticating...");
//button.setWidth(100);
button.setDisabled(true);

loginForm.submit({
waitMsg: "Getting Authorization....",
waitTitle: "KVH Login",
method: 'POST',
submitEmptyText: false,
standardSubmit: false,
timeout: 15, //seconds
clientValidation: true,
url: '/login.php',
success: function(form, action){

var response = action.result;
//console.log(form);
console.log(action);
//console.log(response);



//Access Granted!
//document.location.href = "/index.php";
},
failure: function (form, action) {

button.setText("Login");
//button.setWidth(100);
button.setDisabled(false);

switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('AD Logon - Incorrect information', 'Please confirm that you have entered the correct information.');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
ITpermTool.getApplication().connectionFailure("AD Logon - Incorrect information");
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('AD Logon - Incorrect information', action.result.msg + "<BR>" + action.result.error);
break;
default:
Ext.Msg.alert('AD Logon - Incorrect information', "An unknown error has occured.");

}
}
});
} else {
//
Ext.Msg.show({
title: 'AD LOGON',
msg: "Please be sure to fill in your windows username and password.",
minWidth: 300,
modal: true,
icon: Ext.MessageBox.WARNING,
buttons: Ext.Msg.OK
});

}


}

output/resulting page:

{"success":true, "sessionId":'u8f0d09f77s67e5old4h4a71f2'})

My expected outcome is for the form.submit() to process the returned JSON. However, neither success nor failure callbacks are executed since the page is forced to load the returned JSON data...


Can someone point out what I am probably missing?

skirtle
17 Jul 2015, 6:40 PM
Is the form being submitted via AJAX? The browser debug tools should tell you that. (e.g. in Chrome there's a 'Type' column in the Network section).

Try removing all the response headers, see if that makes any difference.

The JSON response you posted is not valid JSON. It contains single-quoted strings and a stray bracket at the end. I doubt this is the cause of the problem as invalid JSON should at least trigger the failure handler.

lorezyra
20 Jul 2015, 6:10 PM
@skirtle,
I'm still bashing my head on this. I found some minor warnings and errors once I enabled display of all errors in php.ini...
I also resolved the JSON output. It now correctly formats the JSON. However, the browser is still "navigating to the login.php" page where the JSON is returned.

Chrome shows the type as "Document." And the console notice continues to display
Resource interpreted as Document but transferred with MIME type application/json: "http://x.x.x.x/login.php".Ext.cmd.derive.doSubmit @ ext-4.2.4.1676/ext-all.js:18Ext.cmd.derive.run @ ext-4.2.4.1676/ext-all.js:18(anonymous function) @ ext-4.2.4.1676/ext-all.js:18
2015-07-21 12:31:59.093 Navigated to http://x.x.x.x/login.php


Request Headers:



Accept
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8


Accept-Encoding
gzip, deflate


Accept-Language
ja,en-US;q=0.7,en;q=0.3


Connection
keep-alive


Cookie
PHPSESSID=8q4u3qpmdnt4fm6b7tfud02bo3


Host
x.x.x.x


User-Agent
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:36.0) Gecko/20100101 Firefox/36.0







Response Headers:




Cache-Control
no-store, no-cache, must-revalidate, post-check=0, pre-check=0


Connection
close


Content-Disposition
inline; filename=LoginResponse.json


Content-Length
57


Content-Type
application/json; charset=UTF-8


Date
Tue, 21 Jul 2015 05:48:28 GMT


Expires
Mon, 26 Jul 2012 00:00:01 GMT


Last-Modified
Tue, 21 Jul 2015 05:48:28 GMT


Pragma
no-cache


Server
Apache/2.2.15 (CentOS)


X-Powered-By
PHP/5.6.9





At this point, I believe my problem is not an EXTJS problem...

skirtle
20 Jul 2015, 10:22 PM
What were your observations for the following?


Is the form being submitted via AJAX? The browser debug tools should tell you that. (e.g. in Chrome there's a 'Type' column in the Network section).


Try removing all the response headers, see if that makes any difference.

Based on what you've posted so far I believe the problem is the first of these.

The console notice gives the line in ExtJS that makes the request. If you use a debug build this would be very useful to see what type of request it is. You should also try stepping through in a debugger. It should become clear pretty quickly whether the form is being submitted via AJAX or via a form submit.

lorezyra
20 Jul 2015, 11:37 PM
Still bashing my head on the wall... This has to be something stupid on my part that I have missed...


I have reduced & simplified my test to just the following and my results have not changed.

I am becoming convenienced that my problem is not on the server, but with ExtJS.



This controller used by the view "itLOGON" from the login.html page. When I click on my logon button it triggers the onKVHlogonClick() function. Unfortunately, neither callback is executed since the page is forced to nagivate to the resulting php output.

ADlogon.js:



Ext.define('ITpermTool.controller.ADlogon', {
extend: 'Ext.app.Controller',
alias: 'controller.adlogon',

views: [
'itLOGON'
],

refs: [
{
autoCreate: true,
ref: 'LoginForm',
selector: '[itemId=loginForm]',
xtype: 'Ext.form.Panel'
}
],


onKVHlogonClick: function(button, e, eOpts) {
var me = this,
loginForm = me.getLoginForm().getForm();

if (loginForm.isValid()) {

//prevent Rabbit Clickers
button.setText("Authenticating...");
//button.setWidth(100);
button.setDisabled(true);

loginForm.submit({
waitMsg: "Getting Authorization....",
waitTitle: "KVH Login",
//method: 'POST',
submitEmptyText: false,
standardSubmit: false,
fileUpload: false,
timeout: 15, //seconds
clientValidation: true,
url: '/loginFake.php',
success: function(form, action){

var response = action.result;
//console.log(form);
console.log(action);
alert(action);
//console.log(response);



//Access Granted!
document.location.href = "/index.php";
},
failure: function (form, action) {

button.setText("Login");
//button.setWidth(100);
button.setDisabled(false);

switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('AD Logon - Incorrect information', 'Please confirm that you have entered the correct information.');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
ITpermTool.getApplication().connectionFailure("AD Logon - Incorrect information");
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('AD Logon - Incorrect information', action.result.msg + "<BR>" + action.result.error);
break;
default:
Ext.Msg.alert('AD Logon - Incorrect information', "An unknown error has occured.");

}
}
});
} else {
//
Ext.Msg.show({
title: 'AD LOGON',
msg: "Please be sure to fill in your windows username and password.",
minWidth: 300,
modal: true,
icon: Ext.MessageBox.WARNING,
buttons: Ext.Msg.OK
});

}
},

init: function(application) {
this.control({

"#KVHlogon": {
click: this.onKVHlogonClick
}
});
}

});



loginFake.php:


<?PHP
header("Content-Type: application/json; charset=UTF-8");


echo ("{\"success\":true,\"sessionId\":\"abcdefghijklmnopqrstuvwxyz\"}");

?>

Request Headers:


Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:
gzip, deflate
Accept-Language:
en-US,en;q=0.8,ja;q=0.6
Cache-Control:
max-age=0
Connection:
keep-alive
Content-Length:
41
Content-Type:
application/x-www-form-urlencoded
Cookie:
PHPSESSID=ud2puipaq416n1s7cnpabcdv17
Host:
x.x.x.x
Origin:
http://x.x.x.x
Referer:
(http://192.168.40.74/login.html)http://x.x.x.x/login.html
User-Agent:
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36


Response Headers:


Cache-Control:
no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:
close
Content-Length:
57
Content-Type:
application/json; charset=UTF-8
Date:
Tue, 21 Jul 2015 07:21:44 GMT
Expires:
Thu, 19 Nov 1981 08:52:00 GMT
Pragma:
no-cache
Server:
Apache/2.2.15 (CentOS)
X-Powered-By:
PHP/5.6.9


OUTPUT:

{"success":true,"sessionId":"abcdefghijklmnopqrstuvwxyz"}

Chrome console displays this error:

Resource interpreted as Document but transferred with MIME type application/json: "http://x.x.x.x/loginFake.php".



Ext.cmd.derive.doSubmit
@
ext-all.js:18


Ext.cmd.derive.run
@
ext-all.js:18


(anonymous function)
@
ext-all.js:18


Navigated to http://x.x.x.x/loginFake.php


Chrome Dev.Tools>Network tab shows the type as "document."

skirtle
20 Jul 2015, 11:47 PM
All of which reinforces my suspicions that the form is being submitted by standard form submit rather than AJAX.

Use a debug build of ExtJS and step through in the debugger. It should quickly become apparent what the problem is.

My best guess at this point is that you have standardSubmit enabled on the form itself.

lorezyra
20 Jul 2015, 11:57 PM
@Skirtle,

Thanks for the reply! Strange... I have that config option defined as false.



//...
loginForm.submit({
waitMsg: "Getting Authorization....",
waitTitle: "KVH Login",
//method: 'POST',
submitEmptyText: false,
standardSubmit: false,
fileUpload: false,
timeout: 15, //seconds
clientValidation: true,
url: '/loginFake.php',
success: function(form, action){

/// },
failure: function (form, action) {
////
}
});
//...

lorezyra
21 Jul 2015, 12:03 AM
@Skirtle,

AH!!!! You are absolutely correct. I had been focused on the controller and completely failed to review the view...

skirtle
21 Jul 2015, 12:07 AM
To understand why, see:

http://docs.sencha.com/extjs/4.2.1/source/Basic.html#Ext-form-Basic-method-submit

I don't know whether you tried stepping through in the debugger but it should have yielded the answer almost immediately. Much better than bashing your head against a wall.