Question

我对从meetup 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的内容Cross-Origin Resource Sharing (CORS)，但我尝试使用它的所有尝试都失败了。

你们有没有人对此有所了解？

谢谢，

马努

Answer 1

您的api不在同一主机上提供。使用像nginx这样的反向代理或使用cors toggle extension。

Answer 2

是的，我现在就开始工作了。 @FailedUnitTest和@Manav Mandal建议值得考虑。但是，您可以使用 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);
  });
}

确保您的服务器和客户端都通过相同的端口运行。

此致

马努

带有axios的VueJS中的预检请求

2 个答案: