从 React 向 Node 发送数据时出现 404 错误？答案

【问题标题】：404 error while sending data from React to Node?从 React 向 Node 发送数据时出现 404 错误？
【发布时间】：2020-11-22 16:20:45
【问题描述】：

我正在尝试向 Node 发送 React 状态，其想法是当用户输入邮政编码时，

React 查找地理坐标，
将其存储在一个状态中
React 将此状态发送到 Node 代码中的开放天气 api，
Node 然后获取天气数据并发送回 React。

我已经完成了 1、2、4，但是 3 给了我一个错误。这是需要接收 React 状态的 Node 代码：

const axios = require('axios');
const dotenv = require('dotenv');
dotenv.config();

module.exports = (app) => {

    app.get('/search-location', (req, res) => {
        res.send('This is the search location page')
    });

    app.post('/search-location', (req, res) => {

        let baseUrl = `http://api.openweathermap.org/data/2.5/weather?`,
            apiKey = `&appid=${process.env.REACT_APP_WEATHER_API_KEY}`,
            coordinates = `lat=` + coord[0] + `&lon=` + coord[1], // here I need the coordinates from React state
            apiUrl = baseUrl + coordinates + apiKey;
        axios.get(apiUrl)
            .then(response => {
                res.json(response.data);
                console.log(response);
            })
            .catch(error => {
                res.redirect('/error');
                console.log(error);
                console.log('search location error')
            });
    });
}

这是将状态发送到 Node 的 React 方法（我正在使用一个虚拟的 coord 变量进行测试）：

sendToNode() {
    
    let coord = {
        longitude: 50,
        latitude: -2.1
    }

    axios.post('http://localhost:4000/search-location', coord)
        .then((response) => {
            console.log(response);
        }, (error) => {
            console.log(error); // here is line 36 where the 404 error logged in console
        });
}

我已经尽可能多地搜索了，上面的方法似乎是正确的，但我在 Chrome 控制台中收到以下错误：

xhr.js:178 GET http://localhost:4000/error 404 (Not Found)
WeatherTile.js:36 Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

为什么会发生这种情况，我该如何解决？提前谢谢！

更新我将节点代码更改为：

......
app.post('/search-location', (req, res) => {
        let coord = req.body.coord;
        let baseUrl = `http://api.openweathermap.org/data/2.5/weather?`,
            apiKey = `&appid=${process.env.REACT_APP_WEATHER_API_KEY}`,
            coordinates = `lat=` + coord[0] + `&lon=` + coord[1],
            /* coordinates = `lat=` + `51.5842` + `&lon=` + `-2.9977`, */
            apiUrl = baseUrl + coordinates + apiKey;
......

现在我在 Chrome 控制台中收到此错误：

POST http://localhost:4000/search-location 500 (Internal Server Error)
WeatherTile.js:36 Error: Request failed with status code 500
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

【问题讨论】：

在您的节点代码中，从浏览器访问请求正文并访问坐标
@pavankumar 你能发表一个答案并详细说明吗？
我会避免重定向到 /error 此处：res.redirect('/error'); 这应该为您提供有关上述 axios.get 中出现问题的更多信息。祝你好运。 ??????
像 req.body 一样访问请求体。，尝试在节点控制台中打印 req.body，以便查看请求体中的内容，尝试在记录之前解析 req
所以你有一个内部服务器错误...... 服务器的控制台说什么？

标签： javascript node.js reactjs

【解决方案1】：

尝试启用 cors 并设置 application/json 标头。您需要启用 cors 才能达到第三个 ip。您还需要适合他们的标题。尝试更深入地研究天气 api 的要求并首先尝试使用 POSTMAN，如果可行，您可以使用输出“代码”选择来获取标题。你不必在邮递员那里注册一个帐户，即使它试图让你成为。

【讨论】：

【解决方案2】：

感谢所有帮助，我认为 pavan kumar 的评论为我指明了正确的方向。将这一行let coord = req.body.coord; 添加到 post 方法后，我能够通过console.log(coord) 看到请求正文：

{ latitude: 50, longitude: -2.1 }

500 内部服务器错误是由调用coord[0] 和coord[1] 引起的，因为coord 是一个对象而不是一个数组。改成后错误消失

coordinates = `lat=` + coord.latitude + `&lon=` + coord.longitude;

再次感谢。

【讨论】：