Question

我的组件中已经有了这个功能，它应该向快速API发送POST请求：

＆＃13;

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

＆＃13;

这是发送请求的API：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

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);

＆＃13;

当我收到请求时，API路由工作正常，但是，当我发布请求时，我一直收到此错误：

无法加载http://localhost:3000/api/v1/addComment：对预检请求的响应未通过访问控制检查：否＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:8080＆＃39;因此是不允许的访问。 createError.js？16d0：16 Uncaught（在promise中）错误：在XMLHttpRequest.handleError（xhr.js？ec6c：87）的createError（createError.js？16d0：16）处出现网络错误

我还试过发送一个标题对象以及axios post请求，但无济于事。根据我对CORS的研究，我了解使用CORS是必要的，允许来自不同域的API请求。我的快速服务器在localhost 3000上运行，而我的vue服务器在本地主机8080上运行。

有人可以解释为什么我仍然会在快递中要求和使用CORS时出现此错误吗？

Answer 1

尝试移动 app.use（CORS（））在分配路线

之前

Answer 2

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

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

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

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

尽管使用CORS

2 个答案: