Trying to fetch my own JSON file but keep getting 404 error

Replit Help
1

I have a fetch that looks like this:

async asyncData() {
    try {
      const response = await fetch('https://myapp.jimmy.repl.co/data.json');
      const data= await response.json();
      console.log(data.json);
      return { data};
// ...

My data.json is in the top level of my nuxtjs folder. But yet still, this json file cannot be accessed with this fetch. The URL is not publicly accessible. My server is listening to private IP address of 172. So I presumed the public URL for it would be my replit domain but I keep getting a 404 error when it tries to retrieve that data.json.

Any insights here?

1 Like
2

Repls should be available/hosted on IP 0.0.0.0, try changing the repl to host there.

2 Likes
3

Dumb question but how/where do I change that?. I have just been using replit for like 3 hours for the first time today lol @Firepup650

4

Could you provide a repl link so we can see how you’re hosting the repl? That way we know what to tell you

1 Like
6

No, the repl link, will look like https://replit.com/@YOURUSERNAME/REPLNAME

2 Likes
7

oh whoops https://replit.com/@JimmyChoo3/whatdrinkshouldiget

1 Like
8

Repl not found, is it private?

1 Like
9

okay try now @Firepup650

10

Interesting. The only file I see to specify the IP in, is set properly. I guess verify that the URL you’re requesting the data from is correct. Otherwise I have no clue, I haven’t worked with Nuxt.js before.

11

Ah no worries @Firepup650. Appreciate your quick responses and effort to help :facepunch:

12

Does the url work from your browser? You should probably try it there first.

13

Hey @JimmyChoo3! Welcome to the community!

Always use ./ instead of your website URL when using local files as this ensures that the file can be accessed even when the URL of the website is changed.

2 Likes
14

Yep I tried it. Turns out that I can get to the URL but my JSON object is empty so this is actually a nuxt issue and not a replit issue

1 Like
15

Right. That makes sense but looks like the fetch api doesn’t like relative URLs, only absolutes

2 Likes
16

The fetch API does allow relative URLs.

2 Likes
17

I should have clarified to say “in my case” - which is me running the fetch on server-side. And naturally servers don’t have concept of relative URLs…only the browser. So I’m going to work on adding an environment variable instead.

3 Likes
18

If the file is located in the server, it should be able to find the file using relative URLs.

2 Likes
19

If the file is located on the server, fetch() is the wrong way to access it.

2 Likes
20

The code is NodeJS running on the server, not JavaScript running in the browser. The server doesn’t know where it is hosted, it could be hosted in multiple places, so server-side fetch can’t support relative urls.

1 Like
21

As @9pfs1 said, if the JSON file is on the server and this code is in the server, use the node:fs module built-in to NodeJS. That way you can read the file data without sending an actual request. Sending a request will only work if the JSON file is hosted, which I suspect it isn’t.

3 Likes