HTTP 请求在 Postman 中有效,但在浏览器中无效 [关闭]

问题描述 投票:0回答:0

我正在关注 YouTube 上关于 Rest API 的教程,它基本上完成了,但是当我点击“Find Ninjas”时它不起作用,相反我得到了这两个错误:

index.js:24 GET http://127.0.0.1:4000/api/ninjas?lng=-80&lat=25 404(未找到); 语法错误:意外的标记'<', "

我在 Postman 上测试过它并且工作得很好,它只发生在实时服务器页面中。这是我的代码:

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();

mongoose.set('strictQuery', true);
mongoose.connect('mongodb://127.0.0.1/ninjago');
mongoose.Promise = global.Promise;

app.use(express.static('public'));
app.use(bodyParser.json());
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});
app.use('/api', require('../routes/api.js'));
app.use(function (err, req, res, next) {
  res.status(422).send({ error: err._message });
});

app.listen(process.env.port || 4000, () => {
  console.log('Now listening for requests');
});
const express = require('express');
const router = express.Router();
const Ninja = require('../models/ninja.js');

router.get('/ninjas', (req, res, next) => {
    Ninja.aggregate([
        {
          $geoNear: {
            near: {
              type: "Point",
              coordinates: [parseFloat(req.query.lng), parseFloat(req.query.lat)],
            },
            distanceField: "dist.calculated",
            maxDistance: 100000,
            spherical: true
          },
        },
      ])
        .then(function (ninjas) {
          res.setHeader('Content-Type', 'application/json');
          res.send(ninjas);
        })
        .catch(next);
});

router.post('/ninjas', (req, res, next) => {
    Ninja.create(req.body).then(function(ninja){
        res.send(ninja);
    }).catch(next);
});

router.put('/ninjas/:id', (req, res, next) => {
    Ninja.findByIdAndUpdate({_id: req.params.id}, req.body).then(function(){
        Ninja.findOne({_id: req.params.id}).then(function(ninja){
            res.send(ninja);
        });
    });
});

router.delete('/ninjas/:id', (req, res, next) => {
    Ninja.findByIdAndDelete({_id: req.params.id}).then(function(ninja){
        res.send(ninja);
    });
});

module.exports = router;
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import './style.css';

function Ninjas() {
  const [ninjas, setNinjas] = React.useState([]);

  const handleSubmit = (event) => {
    event.preventDefault();
    const lng = event.target.lng.value;
    const lat = event.target.lat.value;

    fetch(`/api/ninjas?lng=${lng}&lat=${lat}`)
      .then((response) => response.json())
      .then((data) => {
        setNinjas(data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const ninjasList = ninjas.map((ninja, index) => (
    <li key={index}>
      <span className={ninja.obj.available}></span>
      <span className="name">{ninja.obj.name}</span>
      <span className="rank">{ninja.obj.rank}</span>
      <span className="dist">{Math.floor(ninja.dis / 1000)} km</span>
    </li>
  ));

  return (
    <div id="ninja-container">
      <form id="search" onSubmit={handleSubmit}>
        <label>Enter your Latitude:</label>
        <input type="text" name="lat" placeholder="latitude" required />
        <label>Enter your Longitude:</label>
        <input type="text" name="lng" placeholder="longitude" required />
        <input type="submit" value="Find Ninjas" />
      </form>
      <ul>{ninjasList}</ul>
    </div>
  );
}

const root = document.getElementById('ninjas');
const appRoot = ReactDOM.createRoot(root);
appRoot.render(<Ninjas />);

还有我的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../src/style.css">
    <!-- Importar dependências do React -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <!-- Importar o Babel para transpilar o código do React -->
    <script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
    <title>Ninjago</title>
</head>
<body>
    <h1 class="title">Ninjago - a Ninja REST API</h1>
    <div id="homepage">
        <h1>Hire a ninja in your area!</h1>
        <div id="ninjas"></div>
    </div>
    <script src="../dist/bundle.js"></script>
</body>
</html>

我已经尝试更改我的端口(和实时服务器的端口)但它没有用。它应该显示我的地理位置(纬度和经度)附近的忍者

javascript mongodb express rest http
© www.soinside.com 2019 - 2024. All rights reserved.