xhr Anfrage 404 Knoten und reagieren js

Ich mache eine einfache Login-Seite in reagieren, die durch einen Ajax-Aufruf zu einem Knoten js-Datei mit einer Datenbank verbunden werden sollte.xhr Anfrage 404 Knoten und reagieren js

Dies ist der Code js Knoten, die ich habe:

var express=require('express'); 
var app=express(); 
var db=require('./db'); 
var bodyParser=require('body-parser'); 
var server=require('http').Server(app); 
app.set('port',process.env.PORT||8080); 

app.use(bodyParser.json()); 

app.set('views','views'); 
app.set('view engine','html'); 

app.use(express.static('./public')); 

app.use(bodyParser.urlencoded({ 
    extended:true 
})) 

app.use(express.json()); 
app.use(express.urlencoded()); 

app.post('/newuser',function(req,res){ 
    console.log(req.body.username); 
    console.log(req.body.password); 
})

Und der Ajax-Aufruf aus der Datei sieht reagieren etwas wie folgt aus:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import $ from 'jquery'; 
import {MusicApp} from './music-app.js'; 

class Signup extends React.Component{ 

    constructor(props){ 
     super(props); 
     this.state={ 
      isLoggedin:false 
     } 

     this.changePage=this.changePage.bind(this); 
    } 
    changePage(){ 

     var username=document.getElementById('username').value; 
     var password=document.getElementById('password').value; 
     var that=this; 
     $.ajax({ 
      type:'POST', 
      url:'/newuser', 
      data:{ 
       username:username, 
       password:password 
      }, 
      success:function(){ 
       that.setState({ 
        isLoggedin:true 
       }) 
      } 
     }) 

    } 
    render(){ 
     if(this.state.isLoggedin){ 
      return(
       <MusicApp/> 
       ) 
     }else{ 
      return(
       <div> 
       <input type='text' id='username' placeholder='username'/> 
       <input type='password' id='password' placeholder='password'/> 
       <input type='button' id='signup' value='Signup' onClick={this.changePage}/> 
       </div> 

       ) 
     } 
    } 
} 

ReactDOM.render(<Signup />,document.getElementById('container'));

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
     todo-app 
    </title> 
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
</head> 
<body> 
    <div id="container"> </div> 

    <script type="text/javascript" src="http://localhost:8080/build/vendors.bundle.js"></script> 
    <script type="text/javascript" src="http://localhost:8080/build/musicApp.bundle.js"></script> 
</body> 
</html>

Also, wenn ich den ganzen Code auf Port-Nummer 8080 ausführen, gibt es mir eine 404 für xhr Anfrage nicht gefunden. Die Ordnerstruktur, die ich habe, ist in etwa so: Der Ajax-Aufruf wird von signup.js gemacht. Ich habe bereits npm install --save express und npm install --save body-parser

getan Was bin ich?

Quelle

2017-07-08 Aayushi

Der Ordnerstruktur spielt keine Rolle, weil es nicht direkt auf die URL-Struktur abbildet. Die URL der JS spielt keine Rolle, weil Browser Anfragen bezüglich der Seite stellen, nicht das Skript, das in die Seite geladen wird. Der Code zeigt an, dass er/newuser anfragen sollte und der Server so aussieht, als müsste er/newusers hosten ... also müssen Sie herausfinden, wo er zusammenbricht. Schau dir nicht nur den Statuscode an. Sehen Sie sich die Anfrage der Anfrage und Antwort an. Fordert der Browser die von Ihnen erwartete URL an? Geht es zum richtigen Server? Zeigt das Serverprotokoll, dass es in den richtigen Pfad kommt? – Quentin

Ich bekomme die 404 in meiner Bundle.js-Datei. also ich vermute, dass etwas mit der ganzen Ajax-Anfrage falsch ist @Quentin – Aayushi

Funktioniert ein GET auf die gleiche URL? – terpinmd

Sie Express-Server hört keinen Port, Es hat den Port eingestellt, Es hört nicht darauf.

Versuchen mit dieser

const express=require('express'); 
const bodyParser=require('body-parser'); 
const app = express(); 
const db = require('./db'); 

const PORT = process.env.PORT || 8080; 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended: true})); 


app.set('views', 'views'); 
app.set('view engine', 'html'); 

app.use(express.static('./public')); 

app.post('/newuser', function(req, res) { 
    console.log(req.body.username); 
    console.log(req.body.password); 
    res.send({postedUserName: req.body.username}); 
}); 

if (!module.parent) { 
    app.listen(PORT,() => { 
    console.log(`Your application starts listening at Port ${PORT}`); 
    }); 
}

Quelle

2017-07-08 20:39:46

xhr Anfrage 404 Knoten und reagieren js

Antwort

Verwandte Themen