Nodejs 前端发起$.getJSON请求给后端服务器得到404 GET error：[object%20Object]，且路径非指定路径，请问怎么解决？

Nodejs 前端发起$.getJSON请求给后端服务器得到404 GET error：[object%20Object]，且路径非指定路径，请问怎么解决？

前端我用grunt-contrib-connect起了一个静态服务器，访问地址是http://127.0.0.1:8888 后端我用express搭的，地址是http://127.0.0.1:3000 给res设置了跨域的header，所以并没有出现跨域的报错 问题是我想请求$.getJSON({url: http://127.0.0.1:3000/index})这个接口，但是浏览器控制台报错却是: 404: GET http://127.0.0.1:8888/[object Object] 请问这个错误的url是怎么出来的呢？ 部分代码截图如下： error1.png config.png route.png app.png index.png


4 回复

针对你遇到的问题，我们来分析一下可能的原因，并提供解决方案。

问题分析

从你的描述来看，你正在使用 $.getJSON 方法来向后端服务器发起请求，但实际请求的 URL 是不正确的。具体来说，请求被发送到了 http://127.0.0.1:8888/[object%20Object] 而不是你期望的 http://127.0.0.1:3000/index。

可能的原因

  1. URL 参数错误：$.getJSON 方法的 url 参数可能没有正确设置。
  2. 配置文件问题：你的 Grunt 配置文件或 Express 路由配置可能有误。

解决方案

1. 检查 $.getJSON 的 URL 参数

确保你在调用 $.getJSON 方法时传递了正确的 URL：

$.getJSON('http://127.0.0.1:3000/index', function(data) {
    console.log(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
    console.error('Error:', textStatus, errorThrown);
});

2. 确认 Express 后端路由配置

确保你的 Express 路由配置正确，能够处理 /index 请求。例如：

const express = require('express');
const app = express();

app.get('/index', (req, res) => {
    res.json({ message: 'Hello from the server!' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

3. 检查 Grunt 配置文件

确保你的 Grunt 配置文件正确设置了静态文件服务。例如：

module.exports = function(grunt) {
    grunt.initConfig({
        connect: {
            server: {
                options: {
                    port: 8888,
                    base: './public', // 确保你的静态文件位于这个目录下
                    livereload: true,
                    open: true
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-connect');

    grunt.registerTask('default', ['connect']);
};

示例代码

假设你的前端 HTML 文件位于 public/index.html，你可以这样编写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="fetchData">Fetch Data</button>
    <script>
        $(document).ready(function() {
            $('#fetchData').click(function() {
                $.getJSON('http://127.0.0.1:3000/index', function(data) {
                    console.log('Data:', data);
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    console.error('Error:', textStatus, errorThrown);
                });
            });
        });
    </script>
</body>
</html>

通过以上步骤，你应该可以解决 404 GET error 和 URL 错误的问题。


jQuery.getJSON( url [, data ] [, success ] )

要学会自己找答案。

$.getJSON('http://127.0.0.1:3000/index')

确实是这里没写对 - -！ 写ajax写习惯了直接传对象 多谢

根据你的描述，问题在于前端的$.getJSON请求没有正确发送到后端服务器。从错误信息来看，请求被发送到了错误的URL上（http://127.0.0.1:8888/[object%20Object]），这通常是由于请求对象构造错误或参数传递不当造成的。

解决方案

  1. 检查请求URL是否正确：确保你使用的是正确的URL，而不是包含其他变量或对象。

  2. 确保$.getJSON方法正确调用：确保你正确地调用了jQuery的$.getJSON方法，并且没有拼写错误或参数错误。

  3. 调试和日志记录：可以在Express后端添加一些日志记录来查看是否有请求到达服务器。

示例代码

假设你的后端有一个路由处理程序：

// express-server.js
const express = require('express');
const app = express();

app.get('/index', (req, res) => {
    console.log('GET /index request received');
    res.json({ message: 'Hello World!' });
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

前端的JavaScript代码应如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="fetchData">Fetch Data</button>
<script>
$(document).ready(function() {
    $('#fetchData').click(function() {
        $.getJSON('http://127.0.0.1:3000/index', function(data) {
            console.log(data);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.error(textStatus + ': ' + errorThrown);
        });
    });
});
</script>
</body>
</html>

关键点解释

  • 正确配置URL：确保请求的URL是http://127.0.0.1:3000/index。
  • 检查请求方法：确认请求是通过GET方法进行的。
  • 使用.fail()处理错误：这样可以捕获并打印出任何发生的错误。

如果问题仍然存在，可以尝试使用浏览器开发者工具（如Chrome DevTools）中的网络监控功能，进一步排查请求的具体细节。

回到顶部