0

Firstly here is my react code: http://pasted.co/bb8b578f

I'm currently attempting to teach myself how to use both nodejs and React on the same project. I followed a tutorial, although it wasn't very straightforward on a lot of things, but fortunately I have worked with both nodejs and react so I believe I was able to accommodate things when it wasn't specified on certain things... the gist of the project is to make a guestbook in which people sign it and add a message, then it's added onto a database (MLab)

I made a very straightforward herokuapp that shows me the database I made, it currently only has a few things... the userSchema i made in nodejs is simple:

var mongoose = require('mongoose');

var UserSchema = new mongoose.Schema({
    name: String,
    message: String
});
 mongoose.model('User', UserSchema);
 module.exports = mongoose.model('User');

and the rest works fine, (as in the react app compiles and everything but the post and fetching isn't functioning... nothing happens when i press submit, and no messages are shown from the fetch function -- more details below))

Now, when we get to the react stuff, it seems straightforward, but i have not worked with axios, so i'm not 100% why, but the actual axios.post function does not add onto my database when i submit a signature through the react app. It works fine when i run it locally and use postman though.

The first thing i was going to try to do is to simply use the fetch function which i know works fine when I use a different api, such as the coinmarketcap API, in my code I do have to change it up, but the point is I end up getting the name of bitcoin to show up next to the string "Message: " so i know that I'm doing it right, but for some reason it doesn't work with MY database, or json data.

WHAT I THINK THE PROBLEM IS, however, is that the json data is inside []. You can see it if you go to my heroku app (hyperlinked above), but i'm not really sure, but it IS the only difference I can think of.

Unfortunately, when I try to add a signature, in the react app after i press submit, I don't see anything beind added to the database which i can check in postman as well...

Any suggestions would be greatly appreciated!

Nano
  • 73
  • 7
  • Have you used Chrome's developer tools, and the network tab, to investigate the POST made from your React app? What do you see there? – Chad Moore Jun 26 '18 at 00:59
  • @ChadMoore Interesting. I had not. So all i see is that seems relevant is some movement under the XHR tab. 'users' pops up when i press submit... is there something i should look for? – Nano Jun 26 '18 at 13:34
  • 1
    Yes. You want to see if the request completed or not. You should be able to see the payload that was sent, and any response. What was the status of the HTTP response? – Chad Moore Jun 26 '18 at 16:29
  • 1
    Is it this request `axios.post('https://my-react-interests.herokuapp.com/users', {` that is not working to your backend? – Chad Moore Jun 26 '18 at 16:31
  • @ChadMoore Request URL: https://my-react-interests.herokuapp.com/users Request Method: OPTIONS Status Code: 200 OK That's what i see. Also, Well that, as well as getting the messages to display in the fetch. I sincerely believe it has something to do with my json data being within the []'s because i can get it to fetch fine with the different api – Nano Jun 26 '18 at 16:34
  • 1
    Do you see any errors in your browser console when you run the code? Open the dev tools CMD+option+i, and select the Console tab. I think you'll see some red (errors). I you running your react app from your local machine trying to hit the API deployed at heroku? You may be encountering a CORS issue. See https://stackoverflow.com/questions/25845203/understanding-cors – Chad Moore Jun 26 '18 at 16:37
  • @ChadMoore WOW, As a matter of fact yes, here are the errors localhost/:1 Failed to load https://my-react-interests.herokuapp.com/users: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. localhost/:1 Uncaught (in promise) TypeError: Failed to fetch – Nano Jun 26 '18 at 16:46

1 Answers1

1

This is a CORS problem.

To understand CORS, Understanding CORS, and CORS on mozilla developer docs.

If you are using Express, you can easily use the cors package to fix this quickly: https://www.npmjs.com/package/cors.

Once you have that set up, you should able to successfully make calls from your React client to your API.

Chad Moore
  • 734
  • 4
  • 15