ExtJS表格中的CORS问题

时间:2015-08-04 03:30:39

标签: javascript extjs xampp cors

我将问题从ExtJS表单传递到我的PHP API(位于另一个域中)时遇到问题。以下是我从萤火虫收到的错误

  

阻止跨源请求:同源策略禁止在http://172.16.1.35:81/pls/land-title.php读取远程资源。 (原因:在CORS标题中删除了令牌&x 39; x-requested-with''来自CORS预检频道的访问控制允许标题)。

我在本地Xampp服务器的http.conf中添加了下面的CORS标头

  

标题集设置Access-Control-Allow-Origin" *"

但仍然没有骰子......

以下是我的示例ExtJS表单代码

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');
                            }
                        });
                    }
                }
            }]
        }]
    }]
});

以下是PHP我将值传递给

    <?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';
    }
?>

1 个答案:

答案 0 :(得分:1)

我有同样的问题,我提出了解决方案,我无法通过表单提交CORS请求,因为extjs使用标准表单提交。但你可以用Ext.Ajax.Request来做。您只需要从表单中获取值,并使用正常的ajax请求发送这些值,如

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');
    }
});