错误：网络错误：使用 axios.put 方法多次请求服务器。但随后捕获错误

Posted 2023-02-22

【中文标题】错误：网络错误：使用 axios.put 方法多次请求服务器。但随后捕获错误

【英文标题】：Error: Network Error: with axios.put method request multiple time to server. But then catch error

【发布时间】：2019-01-13 23:05:10

【问题描述】：

我是 react js 的新手。 我的问题是当我在反应端使用 axios.put 方法时： 这是我的 React 组件中的一个方法：

commitAssign() 
  let memberIds = this.state.assignedList;
  // update the data
  const headers = 
    "Content-Type": "application/json"
  ;
  axios
    .put(`/api/projects/$this.props.project._id`,  memberIds , headers)
    .then(res => 
      this.state.assignedList = [];
      this.props.onUpdate();
    )
    .catch(err => console.log(err));

这是我的快递路线：

app.put('/api/projects/:id',(req, res) => 
  //update database
  res.redirect(`/api/projects/$projectId`);
)

当我运行 react 时，看起来像这样：

似乎 axios.put 向服务器发出多个请求，然后出现错误。 此外，我 PUT 的数据仍然多次保存在数据库中（相同的数据）。

请注意，如果我将 PUT 方法更改为 POST ，一切都很好 - 没问题。而且我已经使用 POSTMAN 测试了服务器，也没有问题。

有人知道使用 PUT 方法有什么问题吗？

我正在使用： 服务器依赖： “正文解析器”：“^1.18.3”， "cors": "^2.8.4", “快递”：“^4.16.3”， “猫鼬”：“^5.2.6” 客户端依赖：

"dependencies": 
    "axios": "^0.18.0",
    "jquery": "^3.3.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "semantic-ui-css": "^2.3.3",
    "semantic-ui-react": "^0.82.1"
,
"devDependencies": 
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"

编辑： 这是我的服务器：

var express = require('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var cors = require('cors');
var app = express();
app.use(cors());
mongoose.connect('mongodb://localhost:27017/teamApp_V1', 
    useNewUrlParser: true
);
app.use(bodyParser.urlencoded(
    extended: true
));
app.use(bodyParser.json());

app.get('/api/projects', (req, res) => 
    Project.find((err, allProjects) => 
        if (err || allProjects == null) 
            console.log(err);
         else 
            res.json(allProjects);
        
    );
);
//creact new project
app.post('/api/projects', (req, res) => 
    let newProject = req.body.newProject;
    Project.create(newProject, (err, newProject) => 
        if (err) 
            console.log(err);
        
        res.redirect('/api/projects');
    );
);
//show
app.get('/api/projects/:id', (req, res) => 
    let id = req.params.id;
    Project.findById(id).populate('listMember').exec((err, foundProject) => 
        if (err || foundProject == null) 
            console.log(err);
            res.redirect('/api/projects');
         else 
            res.json(foundProject);
        
    );
);
//edit project - assign member
app.put('/api/projects/:id', (req, res) => 
    let projectId = req.params.id;
    let memberIds = req.body.memberIds;
    Project.findById(projectId, (err, foundProject) => 
        if (err || foundProject == null) 
            console.log(err);
            res.redirect('/api/projects');
         else 
            memberIds.forEach((memberId) => 
                console.log(foundProject);
                //update member id to project
                foundProject.listMember.push(memberId);
                //update project that this member is work for
                Employee.findById(memberId, (err, foundMember) => 
                    if (err || foundMember == null) 
                        console.log(err);
                        res.redirect('/api/projects');
                     else 
                        foundMember.project.push(foundProject._id);
                        foundMember.save();
                    
                )
            )
            foundProject.save((err) => 
                if (err) 
                    console.log(err);
                    res.redirect('/api/projects');
                 else 
                    res.redirect(`/api/projects/$projectId`);
                
            );

        
    );
);
//delete project 



// employees
//index employee
app.get('/api/employees', (req, res) => 
    Employee.find().populate('project').exec((err, allEmployees) => 
        if (err || allEmployees == null) 
            console.log(err);
         else 
            res.json(allEmployees);
        
    );
);

//create new employee
app.post('/api/employees', (req, res) => 
    let newEmployee = req.body.newEmployee;
    Employee.create(newEmployee, (err, newEmployee) => 
        if (err) 
            console.log(err);
         else 
            //do nothing
        
        res.redirect('/api/employees');
    )
);

//edit employee


app.get('*', (req, res) => 
    res.send('Oops! Page is not found.');
);

app.listen(8081, process.env.IP, () => 
    console.log('server is running');
);

【问题讨论】：

好像是cors错误，能显示一下服务器代码吗？

嗨，我已经更新了我的服务器。

是的，网络错误是因为重定向，你为什么不直接放*。

【参考方案1】：

我相信 Dat Tran 的回答大部分是正确的，但它不包含代码，也没有告诉您应该采用哪种方法以及应该如何采用。

无论如何，这是由于重定向而发生的。您的代码导致无限重定向循环，在 chrome 中如下所示：

当您遇到错误/成功时不要重定向，只需发送 json，然后在收到 json 时在 UI 上显示错误/成功内容。

把方法改成这样（注意我加了cmets）：

app.put('/api/projects/:id', (req, res) => 
    let projectId = req.params.id;
    let memberIds = req.body.memberIds;
    Project.findById(projectId, (err, foundProject) => 
        if (err || foundProject == null) 
            console.log(err);
            res.json(err);
         else 
            memberIds.forEach((memberId) => 
                console.log(foundProject);
                //update member id to project
                foundProject.listMember.push(memberId);
                //update project that this member is work for
                Employee.findById(memberId, (err, foundMember) => 
                    if (err || foundMember == null) 
                        console.log(err);
                        res.json( someError: err ); // send an error msg. <====
                     else 
                        foundMember.project.push(foundProject._id);
                        foundMember.save();
                    
                )
            )
            foundProject.save((err) => 
                if (err) 
                    console.log(err);
                    res.json(err); // just like you did in app.get <====
                 else 
                    res.json(foundProject);
                
            );

        
    );
);

【讨论】：

问题并没有完全解决。代码中的所有 res.redirect 都应该被替换。在 API 中使用 res.redirect 是不正确的。应该是 4xx 表示未找到或 5xx 表示服务器错误。

@DatTran 对不起，我忘了更新所有这些。刚修好。你不认为这里的逻辑不正确吗？他正在重定向 forEach 大声笑。

我不确定他的逻辑。这就是为什么我只提原因和解决方案。

好的，谢谢。我已将所有“res.redirect”替换为“res.json”。关于逻辑，@DakshMiglani，你能告诉我更多关于你的观点吗？如果你能指出我的另一个错误，那就太棒了。

@VuLe 所以你实际上是在 for 循环中执行res.json，但你只能发送一次res.json。因此，不要在 for 循环中执行此操作，而是在循环之外执行此操作。

【参考方案2】：

我认为问题出在res.redirect('/api/projects');。

您的服务器返回 302 告诉 axios 继续跟踪重定向并从中获取响应。这就是导致无限重定向循环的原因。

请将res.redirect 更改为res.status(400).json( message: 'whatever' )。 API 永远不应返回重定向，而是返回一个状态码，让客户端知道调用是否成功，并自行决定下一步该做什么。

您在客户端的 catch 将捕获该错误并执行重定向或其他操作。

您可以查看https://en.wikipedia.org/wiki/List_of_HTTP_status_codes 以获取有关不同状态代码的参考。

【讨论】：

感谢您的回复。现在问题已经解决了。