Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Erro de CORS

Não consigo rodar o projeto, em que não fiz nenhuma alteração. Dá este erro e não consigo resolver:

Access to script at 'caminho até o app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

3 respostas

Me parece que o problema está no origin 'null'. Pode postar o teu código?

Arquivo 'cadastro-usuario.html'

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../style/theme.css" />
  <script type="module" src="../../services/app.js"></script>
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Cadastro de Usuário</title>
</head>

<body>
  <div class="container">
    <div class="box">
      <h1>Cadastro de Usuário</h1>
      <form id="form" method="get" action="./cadastro-sucesso.html">
        <hr class="divider" />
        <h2 class="subtitulo">Informações de Acesso</h2>
        <div class="input-container">
          <label class="label" for="email">
            Email
            <span class="info">(Necessário)</span>
          </label>
          <input class="input" required type="email" name="email" id="email" data-tipo="email"/>
        </div>
        <div class="input-container">
          <label class="label" for="password">Senha <span class="info">(Necessário)</span></label>
          <input class="input" required minlength="4" type="password" name="password" id="password" data-tipo="senha"/>
        </div>
        <hr class="divider" />
        <h2 class="subtitulo">Informações Pessoais</h2>
        <div class="input-container">
          <label class="label" for="dataNascimento">Data de Nascimento <span class="info">(Necessário)</span></label>
          <input class="input" min="1900-01-01" required type="date" name="dataNascimento" id="dataNascimento" data-tipo="dataNascimento" />
        </div>
        <div class="input-container">
          <label class="label" for="cpf">CPF <span class="info">(Necessário)</span></label>
          <input class="input" required type="text" name="cpf" id="cpf" data-tipo="cpf"/>
        </div>
        <div class="input-container">
          <label class="label" for="rg">RG <span class="info">(Necessário)</span></label>
          <input class="input" required type="text" name="rg" id="rg" data-tipo="rg"/>
        </div>
        <hr class="divider" />
        <h2 class="subtitulo">Endereço</h2>
        <div class="input-container">
          <label class="label" for="cep">CEP <span class="info">(Necessário)</span></label>
          <input class="input" required type="text" name="cep" id="cep" data-tipo="cep" pattern="\d{2}.?\d{3}-?\d{3}"/>
        </div>
        <div class="input-container">
          <label class="label" for="logradouro">Logradouro <span class="info">(Necessário)</span></label>
          <input class="input" required type="text" name="logradouro" id="logradouro" data-tipo="logradouro"/>
        </div>
        <div class="input-container">
          <label class="label" for="cidade">Cidade <span class="info">(Necessário)</span></label>
          <input class="input" required type="text" name="cidade" id="cidade" data-tipo="cidade"/>
        </div>
        <div class="input-container">
          <label class="label" for="estado">Estado <span class="info">(Necessário)</span></label>
          <input class="input" required type="text" name="estado" id="estado" data-tipo="estado"/>
        </div>
        <div class="botao-container">
          <button class="botao botao-azul" type="submit" id="botaoSubmit">
            Cadastrar Usuário
          </button>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

Arquivo 'app.js'

import { validarInput } from "./validar.js";

window.onload = () => {

    const inputs = document.querySelectorAll('input');

    inputs.forEach(input => {

        if(input.dataset.tipo === 'preco'){
            SimpleMaskMoney.setMask(input, {
                allowNegative: false,
                negativeSignAfter: false,
                prefix: 'R$ ',
                fixed: true,
                fractionDigits: 2,
                decimalSeparator: ',',
                thousandsSeparator: '.',
                cursor: 'end'
            });
        }

        input.addEventListener('input', () => {
            validarInput(input, false);
        })

        input.addEventListener('blur', () => {
            validarInput(input);
        })
    });
}
solução!

Boa tarde, O que eu fiz para resolver esse problema foi adicionar a extensão Live Server no VS Code e rodei por ele. Achei no site do MDN sobre esse erro, se quiser se aprofundar, está nesse link aqui: MDN erro CORS

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