xhr请求404节点并反应js答案

【问题标题】：xhr request 404 node and react jsxhr请求404节点并反应js
【发布时间】：2017-07-09 04:39:46
【问题描述】：

我在 react 中创建了一个简单的登录页面，它应该通过对节点 js 文件的 ajax 调用连接到数据库。

这是我拥有的节点 js 代码：

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

来自 react 文件的 ajax 调用看起来像这样：

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>

所以，当我在端口号 8080 上运行整个代码时，它给了我一个 404 表示找不到 xhr 请求。我拥有的文件夹结构是这样的： ajax 调用来自 signup.js。我已经完成了npm install --save express 和npm install --save body-parser

我错过了什么？

【问题讨论】：

文件夹结构无关紧要，因为它不直接映射到 URL 结构。 JS 的 URL 无关紧要，因为浏览器发出相对于页面的请求，而不是加载到页面中的脚本。代码显示它应该请求 /newuser 并且服务器看起来应该托管 /newusers ......所以你需要弄清楚它在哪里发生故障。不要只看状态码。查看请求的请求和响应。浏览器是否在请求您期望的 URL？它会转到正确的服务器吗？服务器日志是否显示它进入了正确的路径？
我的 bundle.js 文件中出现了 404。所以我猜整个ajax请求有问题@Quentin
GET 对同一个 url 有效吗？
@terpinmd — 没有为其注册 get 处理程序
@aayushi — 什么 bundle.js？问题中没有提到这一点。它不会出现在您的文件系统屏幕截图中。它是否包含您的 changePage 功能？如果该函数未加载，则无法发出 Ajax 请求，因此您所说的给您 404 的请求永远不会发出，因此无法得到任何响应。

标签： javascript node.js ajax reactjs express

【解决方案1】：

你表示服务器没有监听任何端口，它已经设置了端口，它没有监听它。

试试这个

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

【讨论】：