带有 axios 的 VueJS 中的预检请求

Posted 2023-02-27

【中文标题】带有 axios 的 VueJS 中的预检请求

【英文标题】：Preflight request in VueJS with axios

【发布时间】：2018-04-27 14:54:08

【问题描述】：

我有点难以从聚会 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)
)

我在这里 Cross-Origin Resource Sharing (CORS) 阅读了一些关于 CORS 的内容，但我所有试图让它发挥作用的尝试都失败了。

你们中的任何人都可以对此有所了解吗？

谢谢，

手动

【问题讨论】：

我相信对于这个 API，你必须先设置 OAuth：根据：meetup.com/meetup_api

【参考方案1】：

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

【参考方案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);
  );

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

问候，

手动

【讨论】：

请接受您的回答，以明确问题已得到解决并且有可用的解决方案