Problems with querySelectorAll

Navigation
1

QuerySelectorAll works normally in Firefox, but in Chrome it does not. I would like to know if anyone can help me in such an issue, follow the code. 

<script>
        document.querySelectorAll('a').forEach(link => {
            let conteudo = document.getElementById('conteudo')
            link.onclick = function (e) {
                e.preventDefault()
                fetch(link.href)
                    .then(resp => resp.text())
                    .then(html => conteudo.innerHTML = html)
            }
        })
    </script>

The following error appears in the console:

  

Uncaught (in promise) TypeError: Failed to fetch at   HTMLAnchorElement.link.onclick

HTML 

<body data-spy="scroll" data-target=".navbar-collapse">
 <nav class="navbar navbar-inverse" style="background-color: #000080; height: 40px; font: bold 15px Arial, sans-serif;">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#" style = "font: italic 20px Verdana;">KAUYYZI</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <i class="fa fa-user-md"></i>
            <span class="icon icon-bar">A</span>
            <span class="icon icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse">
        <ul class = "nav navbar-nav">
            <li>
                <a href="tabela.html">Contato</a>
            </li>
            <li>
                <a href="agendamentoPaciente.html">Agendamento</a>
            </li>
        </ul>
        </div>
    </div>
</nav>
<section id="conteudo"></section>
<footer class = "ftr">
    KAUYYZI 2018 &copy;
</footer>

Network Error

  

URL scheme must be "http" or "https" for CORS request.

    
asked by anonymous 16.05.2018 / 20:22

2 answers

2

The FILE:/// protocol is not allowed to interact with fetch nor Ajax ( XmlHttpRequest ), put to run on a local HTTP server, like Apache, there are many programs like:

  • Wamp
  • Xampp
  • EasyPHP

You will have to move your file:///C:/XXX/XXX%20XXX/Desktop/ex/ folder into the Wamp folder (I think it is the www folder)

And then access it in the browser http://localhost/ex/

    
16.05.2018 / 21:15
1

The problem is not with querySelectorAll , which usually works in your code. The problem is with fetch in local files using Chrome.

Firefox (and Edge) allows you to access local files via fetch (so no error), as long as the page that is using the API is also local. And since the file:/// protocol is not explicit (except in Edge, which accepts explicitly or not): 

<a href="pagina.html">link</a> OK!
<a href="file:///pagina.html">link</a> BLOQUEIA!

Chrome, for security reasons and browser policy, blocks such access, allowing only via HTTP (or HTTPS) protocol.

You can use Firefox to test the API locally, and when uploading the files to an HTTP server, will work normally in Chrome and other API-compatible browsers.

    
17.05.2018 / 02:10
Day and month comparison in SQL Server Add columns Vue.js