我将问题从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';
}
?>
答案 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');
}
});