Results 1 to 9 of 9

Thread: Resource interpreted as Document but transferred with MIME type application/json

  1. #1
    Sencha Premium User lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 千葉
    Posts
    666
    Answers
    10

    Default Answered: Resource interpreted as Document but transferred with MIME type application/json

    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:
    PHP Code:
     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) {
    PHP Code:
    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',
                       
    submitEmptyTextfalse,
                       
    standardSubmitfalse,
                       
    timeout15//seconds
            
    clientValidationtrue,
                       
    url'/login.php',
                       
    success: function(formaction){
     
                                 var 
    response action.result;
                                 
    //console.log(form);
                                 
    console.log(action);
                                 
    //console.log(response);
     
     
     
                                 //Access Granted!
                                 //document.location.href = "/index.php";
                       
    },
                       
    failure: function (formaction) {
     
                                 
    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.",
                       
    minWidth300,
                       
    modaltrue,
                       
    iconExt.MessageBox.WARNING,
                       
    buttonsExt.Msg.OK
              
    });
     

    }

    output/resulting page:
    Code:
    {"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?

  2. 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.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    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.

  4. #3
    Sencha Premium User lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 千葉
    Posts
    666
    Answers
    10

    Default

    @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...

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    What were your observations for the following?

    Quote Originally Posted by skirtle View Post
    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).
    Quote Originally Posted by skirtle View Post
    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.

  6. #5
    Sencha Premium User lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 千葉
    Posts
    666
    Answers
    10

    Default

    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:
    PHP Code:
     
    Ext
    .define('ITpermTool.controller.ADlogon', {
              
    extend'Ext.app.Controller',
              
    alias'controller.adlogon',
     
              
    views: [
                       
    'itLOGON'
              
    ],
     
              
    refs: [
                       {
                                 
    autoCreatetrue,
                                 
    ref'LoginForm',
                                 
    selector'[itemId=loginForm]',
                                 
    xtype'Ext.form.Panel'
                       
    }
              ],
     
     
              
    onKVHlogonClick: function(buttoneeOpts) {
                       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',
                                          
    submitEmptyTextfalse,
                                          
    standardSubmitfalse,
                                          
    fileUploadfalse,
                                          
    timeout15//seconds
                               
    clientValidationtrue,
                                          
    url'/loginFake.php',
                                          
    success: function(formaction){
     
                                                    var 
    response action.result;
                                                    
    //console.log(form);
                                                    
    console.log(action);
                                                    
    alert(action);
                                                    
    //console.log(response);
     
     
     
                                                    //Access Granted!
                                                    
    document.location.href "/index.php";
                                          },
                                          
    failure: function (formaction) {
     
                                                    
    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.",
                                          
    minWidth300,
                                          
    modaltrue,
                                          
    iconExt.MessageBox.WARNING,
                                          
    buttonsExt.Msg.OK
                                 
    });
     
                       }
              },
     
              
    init: function(application) {
                       
    this.control({

                                 
    "#KVHlogon": {
                                          
    clickthis.onKVHlogonClick
                                 
    }
                       });
              }
     
    }); 
    loginFake.php:
    PHP Code:
    <?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://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."

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    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.

  8. #7
    Sencha Premium User lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 千葉
    Posts
    666
    Answers
    10

    Default

    @Skirtle,

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

    PHP Code:
     //...
                                 
    loginForm.submit({
                                          
    waitMsg"Getting Authorization....",
                                          
    waitTitle"KVH Login",
                                          
    //method: 'POST',
                                          
    submitEmptyTextfalse,
                                          
    standardSubmitfalse,
                                          
    fileUploadfalse,
                                          
    timeout15//seconds
                               
    clientValidationtrue,
                                          
    url'/loginFake.php',
                                          
    success: function(formaction){
     
    ///                                 },
                                          
    failure: function (formaction) {
    ////
                                          
    }
                                 });
     
    //... 

  9. #8
    Sencha Premium User lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 千葉
    Posts
    666
    Answers
    10

    Red face

    @Skirtle,

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

  10. #9
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    To understand why, see:

    http://docs.sencha.com/extjs/4.2.1/s...-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.

Similar Threads

  1. Resource interpreted as Image but transferred with MIME type
    By Notepad123 in forum Sencha Touch 2.x: Bugs
    Replies: 2
    Last Post: 30 Sep 2014, 8:53 AM
  2. Replies: 4
    Last Post: 12 Apr 2013, 4:40 AM
  3. Replies: 4
    Last Post: 6 Feb 2012, 2:13 AM
  4. Replies: 0
    Last Post: 11 Aug 2011, 7:40 AM
  5. Resource interpreted as script but transferred with MIME type application/json.
    By Dav Yaginuma in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 12 Sep 2010, 6:00 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •