ExtJS 表单中的 CORS 问题

Posted 2023-02-25

【中文标题】ExtJS 表单中的 CORS 问题

【英文标题】：CORS issue in ExtJS Form

【发布时间】：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 — 你也需要那个。

【参考方案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 有帮助。我很高兴我的回答有所帮助。