尽管使用了 CORS，但对 expressjs 的 POST 请求不起作用

Posted 2023-02-22

【中文标题】尽管使用了 CORS，但对 expressjs 的 POST 请求不起作用

【英文标题】：POST Request to expressjs not working despite using CORS

【发布时间】：2018-05-26 16:49:58

【问题描述】：

我的组件中有这个函数，它应该向快速 API 发送 POST 请求：

onSubmit (evt) 

      evt.preventDefault();
      //alert(JSON.stringify(this.description));
      axios.post('http://localhost:3000/api/v1/addComment', 
        articleid: this.id,
        description: this.description
      );

    

这是发送请求的 API：

router.post('/api/v1/addComment/', function(req, res) 
  var newComment = req.body;
  //newComment.id = parseInt(commentsData.length);
  commentsData.comments.push(newComment);
    
  
  fs.writeFile('app/data/comments.json', JSON.stringify(commentsData), 'utf8', function(err)
       console.log(err);
  );
  
  res.setHeader("Access-Control-Allow-Origin", "*");  
  res.json(newComment);
);

我还需要在我的 express app.js 文件中使用必要的 CORS 依赖项

var express = require('express');
var reload = require('reload');
var app = express();
var cors = require('cors');
var dataFile = require('./data/articles.json');

app.set('port', process.env.PORT || 3000 );
//app.set('appData', dataFile);
app.set('view engine', 'ejs');
app.set('views', 'app/views');

app.use(express.static('app/public'));
app.use(require('./routes/index'));
app.use(require('./routes/comments'));
app.use(cors());

var server = app.listen(app.get('port'), function()
  console.log('Listening on port ' + app.get('port'));
);

reload(server, app);

当我收到请求时，API 路由工作正常，但是，当我发出 post 请求时，我不断收到此错误：

无法加载http://localhost:3000/api/v1/addComment：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许使用原点“http://localhost:8080” 使用权。 createError.js?16d0:16 Uncaught (in promise) Error: Network Error at createError (createError.js?16d0:16) at XMLHttpRequest.handleError (xhr.js?ec6c:87)

我也尝试在 axios 发布请求中发送一个 headers 对象，但无济于事。 根据我对 CORS 的研究，我了解使用 CORS 是允许来自不同域的对您的 API 的请求所必需的。 我的 express 服务器在 localhost 3000 上运行，而我的 vue 服务器在本地主机 8080 上运行。

有人可以解释为什么尽管在 express 中需要和使用 CORS，但我仍然收到此错误吗？

【参考方案1】：

尝试移动 app.use(cors()) 在分配路线之前先起来

【参考方案2】：

飞行前部分是指 xhr 在实际的POST 之前向/api/v1/addComment 发出OPTIONS 请求。你需要配置 cors 来处理这个问题：

// preflight for aspecific route
router.options('/api/v1/addComment/', cors())

// or preflight for all routes
router.options('*', cors())

注意：您需要在定义其余路由之前进行这些调用。请参阅 npmjs 上的 docs。