Skip to main content

YUI Cross-Domain transactions without Flash

Recently I've worked on the application making cross-domain ajax calls with YUI. While YUI offers io-xdr module for making cross-domain requests via Flash transport, it seems to me quite unnatural as it leads to unnecessary complexity. Moreover, io-xdr was marked deprecated several months ago without explicit mentioning the preferred way. An obvious alternative is using XMLHttpRequest as a transport for cross-domain requests. However, it has some limitations and undocumented pitfalls that I'd like to review in this post.
  1. Cross-Domain request using XMLHttpRequest.
  2. YUI IO Utility.
  3. YUI Datasource IO.
Cross-Domain request using XMLHttpRequest
Cross-domain requests can be sent using a common XMLHttpRequest object. The only requirement is that the server must be configured to properly handle those requests. Specifically, it should set the Access-Control-Allow-Origin response header according to Cross-Origin Resource Sharing specification. For more details and good tutorials you can refer to Mozilla documentation.

YUI IO Utility
When I've tried to create a cross-domain request with YUI IO Utility, I've got the following JavaScript error:
OPTIONS https://request-url Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers. io-base.js:731
XMLHttpRequest cannot load https://request-url. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers. 
Apparently, YUI IO Utility sends a preflight OPTIONS request first due to the X-Requested-With header. It looks like a recurring bug in YUI that seems to have been fixed. Anyway there is a guaranteed way to resolve this issue as you can unset headers since YUI 3.3.0. An example:
Y.io(remote_resource_uri, {
    headers: {
        'X-Requested-With': 'disable'
    }
});

YUI Datasource IO
As soon as you've found the above solution, it's easy to make Datasource.IO working with cross-domain requests. You just need to provide the optional ioConfig parameter to the datasource constructor:
var ds = new Y.DataSource.IO({
    source: remote_resource_uri,
    ioConfig: { 
        headers: { 
            'X-Requested-With': 'disable' 
        } 
    }
});

Comments

Popular posts from this blog

Connection to Amazon Neptune endpoint from EKS during development

This small article will describe how to connect to Amazon Neptune database endpoint from your PC during development. Amazon Neptune is a fully managed graph database service from Amazon. Due to security reasons direct connections to Neptune are not allowed, so it's impossible to attach a public IP address or load balancer to that service. Instead access is restricted to the same VPC where Neptune is set up, so applications should be deployed in the same VPC to be able to access the database. That's a great idea for Production however it makes it very difficult to develop, debug and test applications locally. The instructions below will help you to create a tunnel towards Neptune endpoint considering you use Amazon EKS - a managed Kubernetes service from Amazon. As a side note, if you don't use EKS, the same idea of creating a tunnel can be implemented using a Bastion server . In Kubernetes we'll create a dedicated proxying pod. Prerequisites. Setting up a tunnel.

Cocoon authentication

This article will guide you through the steps showing how to use the Authentication Framework in a Cocoon 2.2 application. Maven dependencies. Spring configuration. Sitemap. Login page and controls. Maven dependencies You need the following dependency in your pom.xml : <dependency> <groupId>org.apache.cocoon</groupId> <artifactId>cocoon-auth-impl</artifactId> <version>1.0.0</version> </dependency> Spring configuration Authentication Framework has a flexible configuration based on a concepts of applications and security handlers . There can be several applications defined and running at the same that are simply independent security zones of your web application. The security details of an application are specified using a security handler. There are several implementations provided and you're free to implement your own. Here is the SimpleSecurityHandler used that takes the hardcoded credentials: <?xml versio

Extracting XML comments with XQuery

I've just discovered that it's possible to process comment nodes using XQuery. Ideally it should not be the case if you take part in designing your data formats, then you should simply store valuable data in plain xml. But I have to deal with OntoML data source that uses a bit peculiar format while export to XML, i.e. some data fields are stored inside XML comments. So here is an example how to solve this problem. XML example This is an example stub of one real xml with irrelevant data omitted. There are several thousands of xmls like this stored in Sedna XML DB collection. Finally, I need to extract the list of pairs for the complete collection: identifier (i.e. SOT1209 ) and saved timestamp (i.e. 2012-12-12 23:58:13.118 GMT ). <?xml version="1.0" standalone="yes"?> <!--EXPORT_PROGRAM:=eptos-iso29002-10-Export-V10--> <!--File saved on: 2012-12-12 23:58:13.118 GMT--> <!--XML Schema used: V099--> <cat:catalogue xmlns:cat=