Primefaces - Resource interpreted as Image but transferred with MIME type text/css

[Nilson Uehara]

Olá pessoal,

estou com um problema bem esquisito.

Meu sistema está rodando num servidor com Tomcat7 onde eu o mapeei via Apache para um diretório (via mod_jk, JkMount) de modo que eu não preciso informar a porta no URL:

http://www.dominio.com.br/sistema/pagina.jsf

Está funcionando bem, só que notei um problema com o tema do Primefaces, onde as imagens de diversos controles não aparecem. Abrindo o inspetor de elementos do Chrome, este me informa que o arquivo THEME.CSS está sendo interpretado como imagem:

Resource interpreted as Image but transferred with MIME type text/css: "http://www.dominio.com.br/sistema/javax.faces.resource/theme.css.jsf?ln=primefaces-bluesky".

Os controles estão lá e funcionando, mas sem o style, portanto em branco:

Deveria ser:

.ui-widget-content .ui-icon {

    background-image: url("/sistema/javax.faces.resource/images/ui-icons_72a7cf_256x240.png.jsf?ln=primefaces-bluesky");

}

Aparece:

.ui-widget-content .ui-icon {

}

Se abro o mesmo sistema, só que desta vez, informando a porta do Tomcat na URL, as imagens são apresentadas corretamente.

http://www.dominio.com.br:8180/sistema/pagina.jsf

Alguém tem alguma sugestão para solução?

Um abraço,

Nilson Uehara

[Everton Fujimoto]

A solução mais fácil é tirar o httpd e o modjk e usar o tomcat direto na porta 80... 

Se for usar o modjk só para mudar a porta, isso vai aumentar cerca de 5~10ms em cada requisição... A vantagem de usar o modjk é fazer balanceamento de carga, mas se usar um servlet application com esse recurso não tem necessidade disso.

Att.
Everton William Fujimoto
Hecate Systems
CIO
(47)3394-5516
(47)9947-5481

--
Você recebeu esta mensagem por que é membro do Javasf
http://groups.google.com/group/javasf
 
Conheça também o Java Brazil: http://groups.google.com/group/thejavabrazil

[Nilson Uehara]

O caso é que o mesmo servidor roda o apache (PHP), logo não posso direcionar o Tomcat para a porta 80.

Um abraço,

Nilson Uehara

[Nilson Uehara]

Em ambos os casos, o código é o mesmo.

Na seção HEAD:

<link type="text/css" rel="stylesheet" href="/sistema/javax.faces.resource/theme.css.jsf?ln=primefaces-bluesky" />

Controle:

<span class="ui-row-toggler ui-icon ui-icon-circle-triangle-e"></span>

Um abraço,

Nilson Uehara

Em 27 de agosto de 2012 13:19, Everton William Fujimoto <evert...@gmail.com> escreveu:

Da uma olhada no html gerado, posta aqui a chamada do css em ambos os casos.

[Flavio Cysne]

Nilson,

    qual a versão do Primefaces? Você configurou "ida" e "volta" no proxy reverso?

    Uma possível solução seria colocar o parâmetro do web.xml primefaces.SKIN em none e adicionar o tema direto no <h:head/> com a tag <link/>.

    Tem algum stacktrace no log do servidor de aplicação com relação a este problema?

    Pode ser que esse link te ajude: http://forum.primefaces.org/viewtopic.php?f=3&t=6437&start=10

Espero ter ajudado.

Flávio Cysne

[Nilson Uehara]

    qual a versão do Primefaces? 

Primefaces 3.0.M3

    Você configurou "ida" e "volta" no proxy reverso?

Como faz isso?

    Uma possível solução seria colocar o parâmetro do web.xml primefaces.SKIN em none e adicionar o tema direto no <h:head/> com a tag <link/>.

Skin? Mas isso era só até a versão 2.1 do Primefaces, não?

    Tem algum stacktrace no log do servidor de aplicação com relação a este problema?

Nada

    Pode ser que esse link te ajude: http://forum.primefaces.org/viewtopic.php?f=3&t=6437&start=10

Neste fórum, parece que a versão 2.2-snapshot funcionou. Mas será que terei que fazer um downgrade tão grande para resolver isso?

Um abraço,

Nilson Uehara

[Flavio Cysne]

Nilson,

    o proxy reverso é configurado usando o mod_proxy no Apache Server (http://lmgtfy.com/?q=apache+mod_proxy+tomcat).

    Quando se usa um Apache Server antes do servidor de aplicação é necessário configurar um proxy reverso para evitar problemas com o JSF.

    Não precisa fazer downgrade, o link para o forum foi apenas para referência pois falava sobre o parâmetro primefaces.SKIN.

    O parâmetro correto para a versão 3.0.M3 é primefaces.THEME.

    A questão em usar este parâmetro com o valor none é que, como você está usando o Apache Server, pode prover os recursos estáticos por ele, sem precisar passar pelo ciclo do JSF para ter acesso às imagens, scripts e folhas de estilos dos temas do Primefaces.

    Habilite o DEBUG no log do Tomcat para as classes do Primefaces. Isso pode ajudar a descobrir porquê o css não está renderizando corretamente.

    Antes de mais nada, porquê usar uma versão em Milestone quando já existe a versão 3.0 liberada e estável?

Espero ter ajudado.

Flávio Cysne

[Nilson Uehara]

    O parâmetro correto para a versão 3.0.M3 é primefaces.THEME.

Sim, é este que estou usando:

<context-param>

  <param-name>primefaces.THEME</param-name>

  <param-value>bluesky</param-value>

</context-param>

    A questão em usar este parâmetro com o valor none é que, como você está usando o Apache Server, pode prover os recursos estáticos por ele, sem precisar passar pelo ciclo do JSF para ter acesso às imagens, scripts e folhas de estilos dos temas do Primefaces.

Vou testar dessa forma. Daqui a pouco eu posto o resultado.

    Habilite o DEBUG no log do Tomcat para as classes do Primefaces. Isso pode ajudar a descobrir porquê o css não está renderizando corretamente.

Ok, testarei.

    Antes de mais nada, porquê usar uma versão em Milestone quando já existe a versão 3.0 liberada e estável?

Era a versão mais nova no momento do desenvolvimento. Até agora não troquei porque preciso testar para saber se não há nenhum conflito. Mas já está no tasklist ;)

Um abraço,

Nilson Uehara

[Flavio Cysne]

Nilson, o problema pode ser menor do que imaginei. Dê uma olhada se no código html gerado pela página existe alguma imagem com src="".

Referência: http://stackoverflow.com/questions/658238/debug-message-resource-interpreted-as-other-but-transferred-with-mime-type-appl

[Nilson Uehara]

Não, todos estão com conteúdo no src.

Um abraço,

Nilson Uehara

[Nilson Uehara]

Com relação ao mod_proxy, pelo o que eu vi ele é uma alternativa ao mod_jk, não? 

Aqui no meu servidor o mod_proxy nem está habilitado.

Um abraço,

Nilson Uehara

[Nilson Uehara]

Acabei de fazer um outro teste. Instalei um novo servidor em uma máquina usando Ubuntu, Apache2, Tomcat7 e configurei o mod_jk, ou seja, é praticamente o mesmo ambiente.

Funciona com e sem a porta!!!!

Um abraço,

Nilson Uehara

[Nilson Uehara]

No meio dos testes aqui, descobri o seguinte:

Quando tento acessar o tema, via URL: 

http://www.dominio.com.br:8180/sistema/javax.faces.resource/theme.css.jsf?ln=primefaces-bluesky

o CSS resultante é:

.ui-widget-content .ui-icon{background-image:url("/sistema/javax.faces.resource/images/ui-icons_72a7cf_256x240.png.jsf?ln=primefaces-bluesky");}

Por outro lado, quando acesso a mesmo URL sem a porta:

http://www.dominio.com.br/sistema/javax.faces.resource/theme.css.jsf?ln=primefaces-bluesky

o resultado é:

.ui-widget-content .ui-icon{background-image:url("#{resource['primefaces-bluesky:images/ui-icons_72a7cf_256x240.png']}");}

Ou seja, sem a porta o primefaces insere "#{resource"...

Obs: Fazendo o mesmo teste, no meu servidor local que acabei de instalar, o resultado de ambos é igual (.ui-widget-content .ui-icon{background-image:url("/sistema/javax.faces.resource/...)

Um abraço,

Nilson Uehara

[Everton Fujimoto]

Provavelmente o httpd está com a configuração de sobrescrever os mime types, não lembro onde fica esse arquivo, mas ele tem um arquivo de mime types, ele busca o mime do SO, e nos arquivos de config como httpd.conf e .htaccess tem as regras para sobrescrever esses mimes.

Att.
Everton William Fujimoto
Hecate Systems
CIO
(47)3394-5516
(47)9947-5481

Em 28 de agosto de 2012 11:49, Nilson Uehara <nilu...@gmail.com> escreveu:

[Everton Fujimoto]

o seu server antigo tem algum rewrite rule para a extensão do jsf?

Att.
Everton William Fujimoto
Hecate Systems
CIO
(47)3394-5516
(47)9947-5481

[Nilson Uehara]

Não achei nada relacionado a JSF no mime.types.

Fiz um outro teste. Fiz o deploy do mesmo projeto com um outro nome e funcionou, com e sem porta!!!

Tô ficando maluco. Não é possível que o servidor esteja sacaneando especificamente o nome do projeto! O pior é que não posso trocar de nome, pois já está em produção e distribuído em diversos sites...

Um abraço,

Nilson Uehara

[Everton Fujimoto]

outra possibilidade é a configuração de cache do mod_jk, talvez esteja gerando o cache como octet-stream/app...

Pelo jeito está bem complicado isso aí eim...

Att.
Everton William Fujimoto
Hecate Systems
CIO
(47)3394-5516
(47)9947-5481

[Nilson Uehara]

Meu worker.cachesize está comentado e o mod_cache do apache não está habilitado... ou seja, está complicado e meio. :-((

Obs: Já tentei até restartar apache e o tomcat.

Um abraço,

Nilson Uehara

[Nilson Uehara]

RESOLVI!!!!

Num dos e-mails, eu havia dito que o CSS do tema não estava sendo processado (aparecia o #{resource...), pois bem... adicionei a extensão .CSS como uma URL-PATTERN do Faces Servlet e... tcharan... agora está tudo lindo (pelo menos por enquanto!!)

<servlet-mapping>

  <servlet-name>Faces Servlet</servlet-name>

  <url-pattern>*.jsf</url-pattern>

  <url-pattern>*.css</url-pattern>

 </servlet-mapping>

Um abraço e obrigado a todos pela ajuda, em especial ao Everton Fujimoto e Flavio Cysne,

Nilson Uehara