Prezados,
fiz o exercício conforme segue, porém não estou conseguindo adicionar conteúdo ao cache-storage.
Minha função que processa as urls do cartão ficou assim:
function addEvents(cartao) {
const urlsImagens = Cartao.pegaImagens(cartao);
console.log('Adicionando imagem ao cachestorage');
urlsImagens.forEach(url => {
fetch(url).then(resposta => {
console.log('abrindo cache')
caches.open("ceep-imagens").then(cache => {
console.log(`valor adicionado ao cache: ${url}`)
cache.put(url, resposta);
});
});
});
cartao.on("mudanca.**", saveCartoes)
cartao.on("remocao", ()=>{
cartoes = cartoes.slice(0)
cartoes.splice(cartoes.indexOf(cartao),1)
saveCartoes();
render();
})
}Ao executar o fetch em uma imagem qualquer, acontece o seguinte:
fetch('http://iordanou.org/wp-content/uploads/2015/04/hero-307036_640.png').then(r=> console.log(r))Fetch API cannot load http://iordanou.org/wp-content/uploads/2015/04/hero-307036_640.png. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://iordanou.org' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. (index):1 Uncaught (in promise) TypeError: Failed to fetch
Estou rodando com o mesmo servidor (http-server), porém toda hora está dando erro de CORS.
Vi que há um parâmetro que permite desabilitar CORS no fetch, ficando a chamada assim:
fetch(url, {'mode': 'no-cors'}).then(resposta => {Porém, apesar de logar todas as mensagens (inclusive valor adicionado ao cache:, com a url da imagem), mas na aba application do chrome, em cache storage, nenhum cache é criado... Alguém já passou por algo assim? O que está errado aqui?
