带有axios的VueJS中的预检请求

Question

我有点不满意来自metup API的响应。 我得到的错误：

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

这是我的代码：

var config = {'Access-Control-Allow-Headers': 'Authorization'}

axios.get(`https://api.meetup.com/self/calendar?&sign=true&photo-host=public&page=20`, {headers: config})
.then(response => {
  console.log(response.data)
  this.posts = response.data
})
.catch(e => {
  this.errors.push(e)
})

在这里，我已经在跨源资源共享（CORS）上阅读了一些有关CORS的信息，但是我为使此功能发挥作用的所有尝试都失败了。

你们中的任何一个可以阐明这一点吗？

谢谢，

马努

Answer 1

您的api不在同一主机上提供。 可以使用像nginx这样的反向代理，也可以使用cors切换扩展 。

Answer 2

是的，我现在开始工作了。 @FailedUnitTest和@Manav Mandal的建议都值得考虑。 但是，可以使用API密钥代替我使用OAuth ，而不是使用OAuth 。 另外，我的代理是我的expressJS服务器。

在服务器端，您将遵循以下几行内容：

var express = require('express'); 
var axios = require('axios');

// meetup API
var instance = axios.create({
  baseURL: 'https://api.meetup.com/'
});

app.get('/anything', function(req, res) {
  const apiKey = 'yourKey';
  const isSigned = 'true';
  const photoHost = 'public';
  const pageCount = '20';
  const url = '/self/calendar?' + 'key=' + apiKey + '&sign=' + isSigned 
+ '&photo-host=' + photoHost + '&page=' + pageCount + '';

  instance.get(url)
  .then(response => {
    return res.send(response.data);
  })
  .catch(e => {
    return e;
  })
});

和客户端：

data () {
  return {
    cards: [],
    errors: []
  };
},
created () {
  axios.get('/anything')
  .then(response => {
    this.cards = response.data;
  })
  .catch(e => {
    this.errors.push(e);
  });
}

确保服务器和客户端都在同一端口上运行。

问候，

马努