1
resposta

[Bug] O código não está funcionando direito no navegador

Repliquei o código conforme a aula, porém, se eu abrir o index.html diretamente pelo navegador (Edge) e se olhar no Console do Desenvolvedor, aparece as seguintes mensagens:

Access to script at 'file:///D:/Documentos%20-%20Admin/Documents/Cursos/_ALURA/JS/Aulas%20de%20Web%20JS/aula05-/src/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge. index.js:1

Failed to load resource: net::ERR_FAILED

Mas, se eu abro utilizando Live Server, ele até abre, mas fica diferente do que aparece na aula:

Live reload enabled. index.html:71 [Intervention]Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0 index.js:31 Insignia de Pedrinho: obterInsignia() { if (this.level >= 5) { return Implacavel ${this.tipo} } return ${this.tipo} iniciante } index.js:32 Insignia de Jose: obterInsignia() { if (this.level >= 5) { return Implacavel ${this.tipo} } return ${this.tipo} iniciante }

Não reparei o que está errado no meu código.

Meu index.js:

import { Personagem } from "./modules/personagem.js";

// const personagemPedrinho = {
//     nome: 'Pedrinho',
//     vida: 7,
//     mana: 12,
//     level: 5,
//     tipo: 'Mago',
// }

// const personagemJose = {
//     nome: 'Jose',
//     vida: 7,
//     mana: 6,
//     level: 3,
//     tipo: 'Arqueiro',
// }

const personagemPedrinho = new Personagem();
personagemPedrinho.nome = 'Pedrinho';
personagemPedrinho.mana = 12;
personagemPedrinho.vida = 7;
personagemPedrinho.tipo = 'Mago';
personagemPedrinho.level = 5;

const personagemJose = new Personagem();
personagemJose.nome = 'Jose';
personagemJose.tipo = 'Arqueiro';
personagemJose.level = 3;

console.log('Insignia de ' + personagemPedrinho.nome + ': ' + personagemPedrinho.obterInsignia);
console.log('Insignia de ' + personagemJose.nome + ': ' + personagemJose.obterInsignia);

Meu Personagem.js:

export class Personagem {
    nome
    vida
    mana
    level
    tipo
    descricao

    obterInsignia() {
        if (this.level >= 5) {
            return `Implacavel ${this.tipo}`
        }
        return `${this.tipo} iniciante`
    }
}
1 resposta

Olá Patrick, tudo bem?

Analisando o seu código e o erro que está sendo apresentado, pode ser por conta de você está tentando chamar o método obterInsignia sem os parênteses. No JavaScript, para chamar um método, você precisa usar parênteses.

Então, ao invés de:

console.log('Insignia de ' + personagemPedrinho.nome + ': ' + personagemPedrinho.obterInsignia);
console.log('Insignia de ' + personagemJose.nome + ': ' + personagemJose.obterInsignia);

Você pode tentar usar:

console.log('Insignia de ' + personagemPedrinho.nome + ': ' + personagemPedrinho.obterInsignia());
console.log('Insignia de ' + personagemJose.nome + ': ' + personagemJose.obterInsignia());

Quanto ao erro do CORS, isso ocorre porque você está tentando abrir o arquivo HTML diretamente do sistema de arquivos, o que não é permitido por questões de segurança. Para contornar isso, você pode usar um servidor local, como o Live Server que você mencionou.

Você pode conferir mais informações sobre esse erro no seguinte artigo:

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software