javascript - ExtJS 表单中的 CORS 问题

Question

我在将 POST 值从 ExtJS 表单传递到我的 PHP API(位于另一个域中)时遇到问题。以下是我从 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).

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

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

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