nicht in der Lage meiner verbinden zu MySql Reagieren Anwendung

Question

Ich versuche, meine reagieren Anwendung auf MySQL-Datenbank zu verbinden NodeJS verwenden, aber auf einen Klick auf die Schaltfläche eintragen wirft mir die folgenden Fehler:

POST http://localhost:3000/login 500 (Internal Server Error)

Fehler beim Laden http://localhost:3000/login: Auf der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Ursprung 'http://localhost:8080' ist daher nicht erlaubt. Die Antwort hatte den HTTP-Statuscode 500. Wenn eine undurchsichtige Antwort Ihren Anforderungen entspricht, stellen Sie den Modus der Anfrage auf "Nein", um die Ressource mit deaktiviertem CORS zu holen.

Uncaught (in Versprechen) Typeerror: Fehler

Below zu holen ist mein Code für die Anmeldungskomponente und meine NodeJS Datei.

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!'); 
}); 

Auf Connection.js läuft es auf meine Datenbank verbindet und wenn ich versuche, Daten durch das Schreiben einer Insert-Anweisung direkt zum Einfügen in Die Datei Connection.js wird ausgeführt und dann in die Datenbank eingefügt. Wenn ich jedoch versuche, auf die Schaltfläche Senden auf meiner Benutzeroberfläche zu klicken, wird der obige Fehler ausgegeben.

Kann mir jemand sagen, wo ich falsch gelaufen bin und mich auf dem gleichen Weg führen?

Answer 1

Sie müssen CORS auf dem Server ermöglichen, dies ist keine unerwünschten Anrufe auf Ihrem Server API

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 
}); 

ES zu vermeiden