...

O objetivo desse guia é apresentar a integração de widgets com serviços JSON de outras fontes de dados, que estão fora do domínio do servidor Fluigfluig.
Utilizaremos a técnica de Json Padding - JSONP - para obtermos dados de terceiros com uma função de callback. 

Problema

Se você chegou aqui é porque provavelmente estava desenvolvendo um widget e se deparou com uma mensagem similar a apresentada abaixo.

XMLHttpRequest cannot load http://pudim.com.br/service.
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://pudim.com.br’ is therefore not allowed access.

Páginas web comuns podem utilizar o objeto XMLHttpRequest para enviar e receber dados de servidores remotos, no entanto elas estão restritas nas porém as ações que podem fazer realizar são limitadas pela política de mesma origem (same-origin policy). Isto Este é um conceito muito importante nos modelos no modelo de segurança dos browsers atuais e dita como eles podem somente permitir navegadores atuais, pois define que scripts de uma página "A" podem acessar dados de uma página "B" somente se ambas estiverem na mesma origem. A origem de uma página é definida pelo seu protocolo, endereço e porta.

Felizmente, nem tudo é afetado pela same-origin policy. Por exemplo, é possível carregar uma imagem ou um script de um domínio diferente da página atual. Isto é exatamente o que você faz quando utiliza uma imagem externa numa página. Entretando, apesar disso ser fantástico, Entretanto, isso não ajuda muito quando precisamos obter dados JSON para exibir em uma um widget no fluig. 

JSONP pode ser a solução

 JSONP - JSON with Padding - é uma técnica que nos provê dispõe uma forma de acessar os dados que precisamos. Isto é feito com os dados sendo envelopados empacotados em uma função de callback (o "padding") que será interpretada pelo browser navegador em JavascriptJavaScript. Esta função precisa ser definida na no widget que receberá o retorno JSONP.

Exemplo

Veja abaixo um exemplo de uma chamada JSONP a um serviço fictício de terceiros:

displayPudimData: function(){
	this.getPudimData(function(error, data){
		if(error){
			FLUIGC.toast({
				message: 'Error getting pudim data: No dessert for you!',
				type: 'danger'
			});
			return false;
		}
		// Use the variable 'data', Luke!
	});
}
 
getPudimData: function(callback){
	var options = {
		url: 'http://pudim.com.br/service',
		async: false,
		contentType: 'application/json',
		dataType: 'jsonp',
		loading: false
	};
	FLUIGC.ajax(options, callback);
}

...