Question

我需要将一个PHP项目转换为NodeJS，并且已经完成了API且没有错误。问题是，当我想从前端获取数据时，除了404错误外，它什么都没有返回。当我将代码复制并粘贴到浏览器控制台中时，效果很好。

Server.js

const express = require("express");
const app = express();
const { Sequelize } = require('sequelize');
const path = require('path');


app.use(express.json());

// Conexion
const sequelize = new Sequelize('interaccion', 'carlos', 'CARLOSpsp1', {
    host: 'localhost',
    dialect: 'mysql'
});


app.get('/', (req,res) => {
    res.sendFile(path.join(`${__dirname}/client/index.html`));
});

app.get('/ejes', async (req, res) => {
    try {
        await sequelize.authenticate();
        console.log('Conexion exitosa');
        const [result, metadata] = await sequelize.query("SELECT * FROM ejes");
        return res.json(result);
    } catch (error) {
        console.error('Hubo un error: ', error);
    }
});


const puerto = process.env.PORT || 3000;

app.listen(puerto,() => console.log(`Servidor en el puerto: ${puerto}`));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hola mundo desde index</h1>

    <div id="container" class="container">

    </div>

    <script src="main.js"></script>
</body>
</html>

main.js

let container = document.getElementById("id");
let div = document.createElement("div");

const fetchData = async () => {
    try{
        const res = await fetch("http://localhost:3000/ejes");
        const roles = await res.json();
        console.log(roles);
        roles.forEach(rol => {
            console.log(rol);
        });
    }catch(e){
        console.log("Error", e);
    }
}


window.onload = fetchData;

来自/ ejes路线的回复

控制台输出

Answer 1

它显示main.js的404错误。

您的服务器具有：

app.get('/', (req,res) => {
app.get('/ejes', async (req, res) => {

…main.js没有路由，那么为什么您期望它提供除404 Not Found错误以外的任何内容？

快速文档explains how to serve static files，或者您可以使用与/路线相同的模式。

Answer 2

这里的问题是，您没有指定客户端静态文件。静态文件包含您所有的javascript，css，图像和其他静态资源。

设置客户端可以从中请求资源的静态资源文件夹，否则express将尝试匹配特定的路由。（您没有）

静态资源配置

app.use(express.static("client"));

我无法显示来自本地API的数据

2 个答案: