not able to connect my React application to MySql - mysql

Question

I am trying to connect my react application to MySql database using nodejs but on clicking the submit button it throws me the following error:
POST http://localhost:3000/login 500 (Internal Server Error)
Failed to load http://localhost:3000/login: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 500. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Uncaught (in promise) TypeError: Failed to fetch
Below is my code for my login component and my nodejs file.
Login.js:
import React from "react";
import {Header} from './Header';
export class Login extends React.Component{
constructor() {
super();
this.state = { user: {} };
this.onSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
//const proxyurl = "https://cors-anywhere.herokuapp.com/";
var self = this;
// On submit of the form, send a POST request with the data to the server.
fetch('http://localhost:3000/login', {
method: 'POST',
body: {
name: self.refs.name,
job: self.refs.job
}
})
.then(function(response) {
return response.json()
}).then(function(body) {
console.log(body);
});
}
render(){
return(
<div>
<div id="fm">
<form onSubmit={this.onSubmit} >
<div >
<label>
Username:
<input id="uname" type="text" placeholder="Name" ref="name"/>
</label>
</div>
<div >
<label>
Password:
<input id="upass" type="password" placeholder="Jo b" ref="job"/>
</label>
</div>
<input id="sub" type="submit" value="Submit" />
</form>
</div>
</div>
);
}
}
Connection.js:
var mysql = require('mysql');
var express = require('express');
var app = express();
var con = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "react"
});
con.connect(function(err) {
if (err) throw err;
console.log("Connected!");
//var sql = "INSERT INTO users (name, job) VALUES ('e211', 'Highway 37')";
//con.query(sql, function (err, result) {
//if (err) throw err;
//console.log("1 record inserted");
//});
});
app.post('/login', function(req, res) {
// Get sent data.
var user = req.body;
// Do a MySQL query.
var query = con.query('INSERT INTO users SET ?', user, function(err, result)
{
// Neat!
});
res.end('Success');
});
app.listen(3000, function() {
console.log('Example app listening on port 3000!');
});
On running Connection.js it connects to my database and if I try to insert data directly by writing an insert statement in the Connection.js file and running it, then it inserts into database but if I try to click on submit button on my UI it throws the above error.
Can someone tell me where I have gone wrong and guide me on the same?

Answer 1

You will need to enable CORS on the server this is to avoid any unwanted calls to your server API'S
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With,
Content-Type, Accept");
next();
});
app.get('/', function(req, res, next) {
// Handle the get for this route
});
app.post('/', function(req, res, next) {
// Handle the post for this route
});