Skip to content

December 2, 2016

Getting ExtJs to work with CORS and Cookies (on Chrome)

by Joe Kuan

This is just a quick reminder note for myself on how to get ExtJs working with cross domain Ajax query and Cookie. My server side code is implemented with Php Slim micro framework which I use .htaccess file on the document root directory.

Step 1. Configure Apache

In my document root setting, I enable some settings can be override by .htaccess file.

<Directory /var/www>
    Options Indexes FollowSymLinks MultiViews
    # enable the .htaccess rewrites
    AllowOverride All
    Require all granted
</Directory>

Step 2. Configure .htaccess

In order to allow CORS to send credentials like Cookies, you need to enable the credentials setting as well as match the incoming host. Note that setting Access-Control-Allow-Origin to wildcard (“*”) is not allowed, when Access-Control-Allow-Credentials flag is on. You must match with the incoming host.

Header set Access-Control-Allow-Origin "http://1.2.3.4"
Header set Access-Control-Allow-Credentials true
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ slim.php [QSA,L]

To double check this is working, go the browser’s Developer console and the response headers should look like this:

screen

Step 3. ExtJs Ajax request

Here is a sample ExtJs Ajax code to login to the server (5.6.7.8) with CORS switched on. The first Ajax request is to login to the cross-domain server with username and password. The Ajax response contains Set-Cookie which sets the cookie. The next Ajax query contains withCredential setting which will include the cookie value.

Ext.Ajax.request({
    url: 'https://5.6.7.8/login',
    cors: true,
    useDefaultXhrHeader: false,
    withCredentials: true,
    method: 'POST',
    params: {
        username: 'admin',
        password: 'admin'
    },
    success: function(response) {
        var result = Ext.decode(response.responseText);

        if (result && result.success) {

            // Response contain set-cookie which will set the
            // cookie for the next query

            Ext.Ajax.request({
                url: 'https://5.6.7.8/getFiles',
                method: 'GET',
                cors: true,
                useDefaultXhrHeader: false,
                withCredentials: true,
                success: function(response) {
                    var result = Ext.decode(response.responseText);

                    if (result && result.success) {
                       // process files
                    }
                }
            });
        }
    }
});

Note that if you have CORS toggle extension installed on your Chrome browser. Make sure the URL path filter is correct

screen

Advertisements
Read more from Ajax, ExtJs 6, Web

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: