Cors Issue in Extjs Form
I'm Having a Problem Passing Post Values from an Extjs Form to My Php Api (Located in Another Domain). Below Is the Error I've Received from Firebug...
I'm having a problem passing POST values from an ExtJS form to my PHP API (located in another domain). Below is the error I've received from firebug
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at . (Reason: missing token 'x-requested-with' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).
I've added the CORS header below in the http.conf in my local Xampp server
Header set Access-Control-Allow-Origin "*"
But still no dice...
Below is my sample ExtJS form code
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: '
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: '
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');
}
});
}
}
}]
}]
}]
});
and below is the PHP I'm passing the values to
<?php
header('Access-Control-Allow-Origin: );
if(isset($_REQUEST['first'])) {
echo 'Success: Your firstname is ' . $_REQUEST['first'];
} else {
echo 'ERROR: could not retrieve data';
}
?>
1 Answer
I had the same problem and I came up the solution that I can not make CORS request with form submit as extjs uses standard form submit. But you can do it with Ext.Ajax.Request. You just need to get values from form and send these values with normal ajax request like
Ext.Ajax.request({
url: '
method: 'POST',
cors: true,
useDefaultXhrHeader : false,
params: form.getValues(),
success: function () {
alert('success');
},
failure: function () {
alert('failure');
}
});
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
