16

i tried to use fetch on localhost, but it didn't work.

here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        fetch("hi.txt").then(function(response){
            response.text().then(function(text){
                alert(text)
            })
        })
    </script>
</body>
</html>

hi.txt file is in same folder with the script file.

below error is shown in console:

index.html:12 Fetch API cannot load file:///C:/~~~~/hi.txt. URL scheme "file" is not supported.

(~~~) is path

Improve this question
3
  • Welcome to stackoverflow please read guidelines before asking question Commented Sep 11, 2021 at 16:46
  • @CyrusRaoufi you should be more explicit on which guidelines are violated (maybe the examples should be more minimal?), and be WAY nicer and LESS sarcastic Commented Sep 20, 2022 at 14:13
  • @CyrusRaoufi ah my bad, sorry! Commented Sep 23, 2022 at 13:24

3 Answers 3

Reset to default
20

Since your URL is relative (it's just "hi.txt"), it's resolved against the URL of the page the code is running in. In your case, that appears to be file:///something — that is, a file you've loaded directly from your file system, not by requesting it from a server. Chrome doesn't allow fetching from the file scheme. The file scheme's origin is null. The Chrome team's interpretation of the Same Origin Policy is that no origin, not even itself, should match null. (A reasonable interpretation in my view, but opinions can vary.)

When doing web development, you want to be working through a server process because pages loaded directly from the file system behave differently in several sometimes-subtle ways vs. pages loaded from servers.

There are a couple of ways to do that:

  • Use the features of your IDE, if you use one, and/or extensions to it. For instance, for VSCode there's the "live server" extension which makes it very easy to run your code from a minimal server.
  • Use an actual web server process running locally. There are simple ones that are easy to install.
  • Use one of various "quick start" scaffolding tools that set up simple projects for you, often via npm (and Node.js), with a command you can use to build and run the project locally in development mode.
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you for your commend!!!! I find the way, i do this process in chrome browser. (make html file and view in chrome). but chrome browser can't execute fetch func for your file('css.txt') directly!! (maybe because of security issue) for example. css.txt, index.html is in same folder and i try to view html file that fetch func(trying to access css.txt) is involved, chrome browser can't load Fetch API !!! so i try to make node js server, and upload css.txt. then my problem is solved!! thanks again for your reply. have a great day and hope had a great day!
Hi, I'm trying to make a school project and am a complete beginner with HTML and Javascript and everything. I've come across the same problem so do you mind explaining a bit more on how to fix it i.e. what web server i could use?? One of my teachers (who has no Computing/IT knowledge) needs to be able to easily access it too so she can give me feedback (from a user pov) and I don't wanna have to make her install things.
0

hi you are running your file like this way -you are right clicking on your html file-opening with it browser. This way you are telling to browser to open your html file from your file location where you have saved it.Check in Your browser url bar you will get something like this C:/xampp/htdocs/xyz.html so this is your local directory file system. so now you have to first start your sever such as xampp or whatever server you have installed and then you type this localhost/filename or /subfolder name and / file name if you have stored it in subfolder...and hit enter.inshort you have to query to a server like you does in php file calling.....

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
-1

You can just create a local web server (XAMPP) and upload there your hi.txt file. If you did that, replace

fetch("hi.txt")

with

fetch("http://127.0.0.1/hi.txt")
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.