无法向 Express 服务器 (CORS) 发出 Axios post 请求

Question

我一直在尝试使用 react、axios 和 multer 制作一个简单的图片上传表单，但我想不出一个处理 cors 的方法！

这是我的表格（运行在端口 80 上使用 create-react-app）：

<form onSubmit={uploadAvatar} enctype="multipart/form-data">
  <div className="form-group">
    <input type="file" className="form-control-file" id="avatar" onChange={e => setAvatar({ profileImg: e.target.files[0] })}/>
    <input type="submit" value="Uploader" className="btn btn-default"/>            
  </div>
</form>

以及Axis对应的句柄函数：

const uploadAvatar = e => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("avatar", avatar);
    axios.post("http://localhost:3000/pupilpic", formData, {
        headers: {
            "Content-type": "multipart/form-data",
            "Access-Control-Allow-Origin": "*"
        }
    }).then(res => console.log(res)).catch(err => console.log(err))     
}

我是运行带有 multer（端口 3000）的非常基本的 Express 服务器：

    const express = require('express')
const cors = require('cors');
const multer  = require('multer');
const upload = multer({ dest: "../public/avatars/pupils/"});
const port = process.env.PORT || 3000;

const app = express();

app.use(cors());

app.get("/", (req, res) => {
res.send("Hellow !");
});

app.post('/pupilpic', upload.single('avatar'), function (req, res, next) {
  
  console.log(req.file);
})

app.listen(port, () => {
    console.log("Listening on port "+ port)
})

问题是当我提交表单时，请求被浏览器阻止，即使我配置了 cors()。

为了更具体一点，我在下面添加了浏览器错误。请参阅所附图片。

控制台日志：

网络日志：

Answer 1

我认为您的问题出在您的 cors 配置上。您应该尝试像我在下面的代码中那样添加配置。

const corsOptions = {
  origin: "http://localhost:3000", //front end dns
  optionSuccessStatus: 200,
};
app.use(cors(corsOptions));

Answer 2

您的 POST /pupilpic 中间件缺少 res.end() 语句或类似语句。否则，请求永远不会返回，这就解释了控制台中的“Code d'état: (null)”错误：这只是一个解释为 CORS 错误的超时。

app.post('/pupilpic', upload.single('avatar'), function (req, res, next) {
  console.log(req.file);
  res.end();:
})

无法向 Express 服务器 (CORS) 发出 Axios post 请求

Can't make Axios post request to Express server (CORS)

cors

express

reactjs

multer

axios