使用 axios 在 VueJS 中进行预检请求

Question

我有点难以从聚会中得到回应 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 建议都值得考虑。但是，您可以使用 API 密钥 而不是使用 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 中进行预检请求

Preflight request in VueJS with axios

javascript

http-headers

cors

preflight

axios