ExtJS 表单中的 CORS 问题答案

【问题标题】：CORS issue in ExtJS FormExtJS 表单中的 CORS 问题
【发布时间】：2015-10-26 07:42:21
【问题描述】：

我在将 POST 值从 ExtJS 表单传递到我的 PHP API（位于另一个域中）时遇到问题。以下是我从 firebug 收到的错误

跨域请求被阻止：同源策略不允许读取位于http://172.16.1.35:81/pls/land-title.php 的远程资源。（原因：CORS 预检通道的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌“x-requested-with”）。

我在本地 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';
    }
?>

【问题讨论】：

如果什么都没有到达，那么将标头放入 PHP 文件有什么意义？您的 request 被阻止，这可能意味着没有任何内容传输到 PHP 文件。是这样吗？
查看错误信息。 原因：CORS 预检通道的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌“x-requested-with”。它没有说明 Access-Control-Allow-Origin 的任何内容。
@DrakeES 感谢您的回复。好吧，我只想要响应，以防它确实到达 PHP 文件。我尝试在中添加标头并重新启动服务器，但我仍然收到相同的错误。 Extjs 表单位于 Apache Tomcat 中。
@Quentin 感谢您指出这一点来源：*'
@Loupi — 你也需要那个。

标签： javascript extjs xampp cors

【解决方案1】：

我遇到了同样的问题，我想出了解决方案，因为 extjs 使用标准表单提交，所以我无法使用表单提交来发出 CORS 请求。但是您可以使用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');
    }
});

【讨论】：

谢谢，是的，这行得通 :) 我不明白为什么 ExtJS 需要大量工作才能将 POST 值提交到远程服务器。看起来标准 AJAX 节省了一天
ExtJs 尝试使框架与旧浏览器兼容，例如 IE8、IE7，这就是它使用标准表单提交的原因，在另一种情况下将无法上传文件。在标准表单提交中，您不能指定任何标题。是的，这种情况下标准 ajax 有帮助。我很高兴我的回答有所帮助。