Problems with querySelectorAll

Question

Problems with querySelectorAll

Asked 6 years, 1 month ago

Viewed 253 times

1

querySelectorAll works normally in Firefox, but not in Chrome. I wonder if anyone can help me in such a matter, 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>

In the console appears the following error:

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

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

Gabriel, what gives you console.log(document.querySelectorAll('a').length);`? It would be interesting to join the HTML that gives you this problem...

– Sergio

2018/05/16 at 18:38
Your code seems to work normally on Chrome: https://jsfiddle.net/zwz9kmvn/

– bfavaretto

2018/05/16 at 18:39
What is the address you try to access in fetch? If it’s from another domain, the browser will block access.

– bfavaretto

2018/05/16 at 18:49
@bfavaretto as the Web Site is under construction, is in WAMP.

– Gabriel

2018/05/16 at 18:51
1

@Gabriel but which URL is on the link that clicked that caused the failure, may be cross-origin problem

– Guilherme Nascimento

2018/05/16 at 18:52
@Gabriel posts the links used on <a href> please. So we can help.

– Guilherme Nascimento

2018/05/16 at 19:01
@Guilhermenascimento the problem that works on Firefox and Chrome does not...

– Gabriel

2018/05/16 at 19:04
Go to the console again, but in the network tab (if your browser is in Portuguese the tab is called Network), click on it, then go back to your site and click on any link, then go back to the network tab console window, see the HTTP requests, the one you clicked from the link must have some error. Let us know the error, this should help solve your problem.

– Guilherme Nascimento

2018/05/16 at 19:06
You knew, it was CORS error (cross origin). So now say, which link exactly caused the error URL scheme must be "http" or "https" for CORS request. ?

– Guilherme Nascimento

2018/05/16 at 19:10
@Guilhermenascimento I’m testing locally, would that generate error? something like this would be, file://C:/XXX/XXX%20XXX/Desktop/ex/scheduling.html.

– Gabriel

2018/05/16 at 19:12
So that’s it. It will only work on the HTTP protocol.

– Sam

2018/05/16 at 19:15
Gabriel, finish the question by marking in one of the answers. Do not leave the question open because it is not interesting.

– Sam

2018/05/23 at 01:57

Show 7 more comments

2 answers

2

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

Wamp
Xampp
Easyphp

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

And then log in like this in the browser http://localhost/ex/

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-05-17T00:10:04+00:00

The problem is not with the querySelectorAll, that works normally in your code. The problem is in the use of fetch in local files using Chrome.

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

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

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

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