Axios 发布请求在 React JS 中不起作用

Posted 2023-03-31

【中文标题】Axios 发布请求在 React JS 中不起作用

【英文标题】：Axios Post Request is Not Working in React JS

【发布时间】：2020-05-01 01:11:52

【问题描述】：

我使用 Postman 发送 Post 请求，它们工作正常，但是当我尝试使用 axios 时，它给了我这个错误。

createAnimeList.js:27
 Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:83)
xhr.js:178 POST http://localhost:4000/animes/add 
net::ERR_CONNECTION_REFUSED

这是我的后端代码

router.post("/add", async (req, res) => 
  console.log("Heeeere");
  console.log(req.body.animeName);
  var anime = new Animes(
    animeName: req.body.animeName,
  );
  anime = await anime.save();
  return res.send(anime);
);

这是我使用 Axios 的 React 代码

onSubmit(event) 
    event.preventDefault();
    const anime = 
      animeName: this.state.animeName,
    ;
        console.log(anime);

    axios
      .post("http://localhost:4000/animes/add", anime)
      .then((res) => console.log(res.data))
      .catch((err) => console.log(err));

    //window.location = "/anime";
  

【问题讨论】：

您是否在后端启用了 CORS？

我做到了，但我仍然得到 net::ERR_CONNECTION_REFUSED

【参考方案1】：

似乎是 CORS 问题

在你的节点服务器上安装：

https://www.npmjs.com/package/cors

这是一个使用此库启用 CORS 的节点服务器的简单示例。

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) 
  res.json(msg: 'This is CORS-enabled for all origins!')
)

app.listen(80, function () 
  console.log('CORS-enabled web server listening on port 
  80')
)

【参考方案2】：

您需要启用 CORS(Cross-Origin-Resoruce-Sharing)

你可以使用 cors 包

https://www.npmjs.com/package/cors

或者这个代码

将此控制器放在应用程序中的每个控制器之前

app.use((req, res, next) => 
  res.setHeader('Access-Control-Allow-Origin', '*'); // to enable calls from every domain 
  res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET, POST, PUT, PATCH, DELETE'); // allowed actiosn
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); 

  if (req.method === 'OPTIONS') 
    return res.sendStatus(200); // to deal with chrome sending an extra options request
  

  next(); // call next middlewer in line
);

【参考方案3】：

这是一个 CORS 问题： 您需要在后端添加以下代码：

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

app.use(cors(
   credentials:true,
   origin: ['http://localhost:PORT']
 ));

在原始数组中，您需要插入那些在白名单中的 url。