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