6
respostas

[Bug] Diversos alertas de "Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'" O que posso fazer?

Tento rodar meu código mas ele fica exibindo uma porção de alertas no console e não mostra as imagens apesar de criar um espaço grande em branco no meu site. Alguém sabe como posso resolver isso?

Já alterei os nomes dos arquivos e me certifiquei de importar os dois arquivos js no meu index.html. Estou utilizando o LiveServer.

IError with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'.

import { conectionWithApi } from "./conectionWithApi.js"

const lista = document.querySelector("[data-lista]")

function constroiCard(titulo,descricao,url,imagem){
    const video = document.createElement('li')
    video.className = "videos__item"
    video.innerHtml = `<iframe width="100%" height="72%" src="${url}"
                            title="${titulo}" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen></iframe>
                        <div class="descricao-video">
                            <img src="${imagem}" alt="${titulo}">
                            <h3>${titulo}</h3>
                            <p>${descricao}</p>
                        </div>` 
    return video
}

async function listaVideo(){
    const listaAPI = await conectionWithApi.listaVideos()
    listaAPI.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)));
}

listaVideo()
async function listaVideos(){
    const conexao = await fetch("http://localhost:3000/videos")
    const conexaoConvertida = await conexao.json()
    return conexaoConvertida
}
listaVideos()

export const conectionWithApi = {
    listaVideos
}
6 respostas

Meu Html está assim:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/estilos.css">
    <link rel="stylesheet" href="./css/flexbox.css">
    <title>AluraPlay</title>
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
</head>

<body>

    <header>

        <nav class="cabecalho">
            <a class="logo" href="./index.html"></a>

            <div class="cabecalho__pesquisar">

                <input type="search" placeholder="Pesquisar" id="pesquisar" class="pesquisar__input">
                <button class="pesquisar__botao">

            </div>

            <div class="cabecalho__icones">
                <a href="./pages/enviar-video.html" class="cabecalho__videos"></a>
            </div>
        </nav>

    </header>

    <ul class="videos__container" alt="videos alura" data-lista>
        <li class="videos__item">
            <iframe width="100%" height="72%" src="https://www.youtube.com/embed/pA-EgOaF23I"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
            <div class="descricao-video">
                <img src="./img/logo.png" alt="logo canal alura">
                <h3>Qual é o melhor hardware para programação com Mario Souto</h3>
                <p>236 mil visualizações</p>
            </div>
        </li>
        <li class="videos__item">
            <iframe width="100%" height="72%" src="https://www.youtube.com/embed/OrnUhR41MYI"
                title="Voltando ao mercado após a maternidade: Ana Silvério" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
            <div class="descricao-video">
                <img src="./img/logo.png" alt="logo canal alura">
                <h3>Voltando ao mercado após a mmaternidade: Ana Silvério</h3>
                <p>618 visualizações</p>
            </div>
        </li>
        <li class="videos__item">
            <iframe width="100%" height="72%" src="https://www.youtube.com/embed/YhnNOTde2I0"
                title="Mercado de Trabalho | Desmistificando Mobile - Episódio 5" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
            <div class="descricao-video">
                <img src="./img/logo.png" alt="logo canal alura">
                <h3>Mercado de Trabalho | Desmistificando Mobile...</h3>
                <p>1,1 mil visualizações</p>
            </div>
        </li>
        <li class="videos__item">
            <iframe width="100%" height="72%" src="https://www.youtube.com/embed/y8FeZMv37WU"
                title="Conhecendo a linguagem Go | Hipsters.Talks" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
            <div class="descricao-video">
                <img src="./img/logo.png" alt="logo canal alura">
                <h3>Conhecendo a linguagem Go | Hipsters.Talks</h3>
                <p>3 mil visualizações</p>
            </div>
        </li>
    </ul>
    <script src="./App/conectionWithApi.js" type="module"></script>
    <script src="./App/mostraVideos.js" type="module"></script>
</body>
</html>

Oi, Vinicius! Tudo bem?

Não consigo ver quais erros estão aparecendo pois no seu console só ficou os avisos do Chrome, que não atrapalham no desenvolvimento. Mas duas coisas que eu imagino ser:

  • Pode ser um erro que já ocorreu comigo que foi de fazer o projeto utilizando a extensão adblock rodando no meu navegador, que dá empecilho com o embed dos vídeos gerando vários erros no console, então pra resolver seria desativar na página.
  • Os vídeos utilizados no projeto do curso eram do usuário da Alura no youtube, e o canal foi invadido recentemente e perdemos alguns vídeos, por isso aparece o 'Video não listado'. Talvez isso esteja fazendo retornar erro por não conseguir conectar o iframe.

Agora, sobre os cards dos vídeos não aparecerem na sua conexão com o db.json, é por que há um erro de digitação na função constrói card:

video.innerHtml = `<iframe width="100%" height="72%" src="${url}"

A propriedade correta é innerHTML, o html precisa ser tudo em maiúsculo. Portanto, a linha corrigida deve ser:

video.innerHTML = `<iframe width="100%" height="72%" src="${url}"

Tenta corrigir isso pra ver se agora vai aparecer os cards direitinho na tela ^^

Estou com o mesmo problema! Já refiz o código varias vezes. Achei um artigo que fala pra colocar uma meta tag no index.html, mesmo assim não funcionou...

https://bobbyhadz.com/blog/error-with-permissions-policy-header-unrecognized-feature#setting-the-permissions-policy-meta-tag

Testei no chrome, firefox, aba anonima e o erro persiste...

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Pessoal, tudo bem?

Sobre o erro "Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor" em específico eu ainda não encontrei uma solução que podemos aplicar no front-end.

Como ele está da cor amarela, ou seja, é um warning (aviso) é possível ignorar que esse erro em si não irá atrapalhar no resultado do projeto. Isso é o que encontrei de recomendação em outros fóruns como o Stack Overflow. Também achei justificativas como isso ser causado por atualizações do Chrome.

Se estiver atrapalhando no resultado, penso que seja outro erro e não esse do Permissions-Policy. No caso do Vinicius eu acredito que o erro de carregamento tenha sido a questão do innerHTML, já no do Felipe eu precisaria ver o código para verificar o que ele está alertando como erro 404 (talvez precisa subir denovo o db.json com o comando json-server --watch db.json?)

Monica, tudo bem? Para min o servidor só sobe usando o comando npx json-server --watch db.json, quando eu o comando json-server --watch db.json, ele dá o erro

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade

Olha....

Acabei de testar e funcionou, acredito que o erro estava no arquivo conectaApi.js onde o nome era conectaApi.js, mas a conexão estava como conectaAPI.

Obrigado