Local ajax file not being found in reactjs project

Question

I am having a problem with a practise project I am trying to write in Reactjs. This is just a basic react project, I'm not using flux or anything. The project has been set up using create-react-app.

I'm just trying a simple procedure to get some mock data from a local json file (using axios library). The idea eventually is to build a php file that can return data or update a mysql database. The trouble is, that react keeps saying "404 not found" on the local file in question.

Example :

    axios.get('./ajax.json')
            .then(function (result) {
                console.log(result);
            });

All I get is "404 not found" on the ajax.json file. I have tried different ways of referring to it, but all I get is "Not found".

Eventually, I would like the React app to communicate with a php class that I have written via ajax, so that it saves information to a local database. The "ajax.json" file that I am using was just a quick thing for testing purposes. I have tried with a php file as well, but I have the same result.

I am running the app with "npm start" - I'm wondering whether this has something to do with it. I can't find instruction anywhere on how to communicate with local php files using the built in react server (that is used with npm start).

I have managed to make a successful ajax call from the fakejsonplaceholder website, but this is using an http:// call, not a local one.

Is there some kind of special way of doing this with React? What am I missing?

Thanks.

Frank Smith · Accepted Answer · 2016-12-14 19:41:44Z

1

I'm not sure whether is a definitive answer, but I just started mucking around in the end, and found success when I put my json file in my "public" folder of my project. Thanks a lot azium I really appreciate your comments.

answered Dec 14, 2016 at 19:41

Frank Smith

234 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

azium Over a year ago

That's what the upvote button is for! Glad you figured it out :)

Frank Smith Over a year ago

There's a delayed xmas upvote for you there! Sorry, I'm new here :D

azium · Accepted Answer · 2016-12-13 19:11:34Z

0

Your React application is running in your browser, which doesn't have access to your filesystem. If you could fetch files directly from the browser, you would have a major security issue on your hands. You either need to serve your json data from a server, or I would recommend copying the json data into http://myjson.com/ which will give you a url that you can fetch, for testing purposes.

answered Dec 13, 2016 at 19:11

azium

20.7k8 gold badges63 silver badges81 bronze badges

7 Comments

Frank Smith Over a year ago

Ah ok, yes I understand. I suspected it may be something similar, however, I haven't quite got my head around it yet, but I think I understand what you're saying. So - if I put my database and my php files on my remote server and do it this way, this would work, yes? So I'll be using "MYSERVER/MYPROJECT/ajax.php" or similar to refer to in my react app?

azium Over a year ago

I'm not well versed in PHP, but what your saying sounds correct. As long as the files are exposed by some url then you should be able to fetch it with fetch or axios etc

Frank Smith Over a year ago

I've actually moved my test json file to my server, and a test php file. And I'm still getting error on the ajax call. Checking "Network" on the browser developer tools, the files are being accessed, the url is correct. When I console log the returned data, axios gives me an error which reads "Network error" - with no other information.

Frank Smith Over a year ago

I'm now trying it using jquery and getJSON - if I use this file - "jsonplaceholder.typicode.com/posts/1" from the fake api site, I get success. If I use the json file from my remote server, I get a failure. I can't seem to get any kind of clue as to what the error code is.

azium Over a year ago

can you access the JSON file just by going directly the url in the browser?

|

Collectives™ on Stack Overflow

Local ajax file not being found in reactjs project

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related