CORS issue in ExtJS Form

Question

I'm having a problem passing POST values from an ExtJS form to my PHP API (located in another domain). Below is the error I've received from firebug

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://172.16.1.35:81/pls/land-title.php. (Reason: missing token 'x-requested-with' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

I've added the CORS header below in the http.conf in my local Xampp server

Header set Access-Control-Allow-Origin "*"

But still no dice...

Below is my sample ExtJS form code

menuOption =  Ext.create('Ext.form.Panel', {
    autoHeight: true,
    width: '100%',
    defaults: {
        anchor: '100%',
        labelWidth: 100
    },
    items: [{
        xtype: 'tabpanel',
        width: '100%',
        height: '100%',
        items: [{
            title: 'Title Information',
            xtype: 'form',
            bodyPadding: 10,
            url: 'http://172.16.1.35:81/pls/land-title.php',
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank: false
            },{
                fieldLabel: 'Last Name',
                name: 'last',
                allowBlank: false
            }],
            buttons: [{
                text: 'Reset',
                handler: function() {
                    this.up('form').getForm().reset();
                }
            }, {
                text: 'Submit',
                url: 'http://172.16.1.35:81/pls/test.php',
                formBind: true,
                disabled: true,
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            success: function(form, action) {
                               console.log('Success');
                            },
                            failure: function(form, action) {
                                console.log('Failed');
                            }
                        });
                    }
                }
            }]
        }]
    }]
});

and below is the PHP I'm passing the values to

    <?php

    header('Access-Control-Allow-Origin: http://172.16.1.85:8080/ncr/pls/');

    if(isset($_REQUEST['first'])) {
        echo 'Success: Your firstname is ' . $_REQUEST['first'];
    } else {
        echo 'ERROR: could not retrieve data';
    }
?>

What's the point in putting the header into the PHP file if nothing is even reaching it? Your *request* is blocked which perhaps means nothing is transmitted to the PHP file. Is this the case? — Greendrake, Aug 04 '15 at 04:06
Look at the error message. *Reason: missing token 'x-requested-with' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel*. It doesn't say anything about Access-Control-Allow-Origin. — Quentin, Aug 04 '15 at 12:22
@DrakeES Thanks for your reply. Well I just want the response in case it did reach to the PHP file. I've tried adding the headers in the and restarted the server but I still get the same error. The Extjs form is located in Apache Tomcat. — Loupi, Aug 05 '15 at 00:53
@Quentin Thanks for pointing it out I've searched about the Access-Control-Allow-Headers and it pointed me to this http://stackoverflow.com/questions/12630231/how-do-cors-and-access-control-allow-headers-work monsur said that I should add the Access-Control-Allow-Origin: *' — Loupi, Aug 05 '15 at 00:55

score 1 · Accepted Answer · answered Aug 07 '15 at 14:55

1

I had the same problem and I came up the solution that I can not make CORS request with form submit as extjs uses standard form submit. But you can do it with Ext.Ajax.Request. You just need to get values from form and send these values with normal ajax request like

Ext.Ajax.request({
    url: 'http://172.16.1.35:81/pls/land-title.php',
    method: 'POST',
    cors: true,
    useDefaultXhrHeader : false,
    params: form.getValues(),
    success: function () {
        alert('success');
    },
    failure: function () {
        alert('failure');
    }
});

answered Aug 07 '15 at 14:55

Zura Sekhniashvili

1,147
7
19

Thanks, Yes this works :) I dont why ExtJS need a lot of work just to submit a POST value to a remote server. Looks like standard AJAX saves the day – Loupi Aug 10 '15 at 01:40
ExtJs tries the framework to be compatible with old browsers such as IE8, IE7 that's why it uses standard form submit, in another case it will be impossible to upload files. And in standard form submit you can not specify any headers. Yes it this case standard ajax helps. I am glad that my answers helped. – Zura Sekhniashvili Aug 10 '15 at 04:15

CORS issue in ExtJS Form

1 Answers1