vue.js - 无法使用 Vue 和 Axios 查询 AWS API

Question

几天来，我一直在尝试从 AWS API 获得响应。如果我使用 Postman 查询它，它工作得很好，但是当我使用 vue 和 axios 编写代码时，它根本不起作用。所以，这就是我所在的位置，哪些有效，哪些无效。

我有一个简单的“getCryptos”方法，可以从 coinmarketcap.com API 获取当前市场值(value)。这是为了证明使用 AWS API 以外的其他 API 也能正常工作。该方法如下所示:

async getCryptos() {
  await axios.get('https://api.coinmarketcap.com/v1/ticker/').then((resp) => {
    this.response = resp.data;
  }).catch((err) => {
    this.error = err.message;
  });
}

这个方法很好用。当它被调用时，代码会转到 then 函数并用收集到的数据填充 this.response。

现在，为了调用 AWS API，我修改了代码以添加 API key 和 GET 查询的参数。下面的代码隐藏了确切的 URL、API key 和参数，但您会明白的。我还在 then 和 catch debugger 的调用em> 函数以查看代码的去向。

async getAWS() {
  await axios.get('https://xxxxxxxxx.execute-api.us-west-2.amazonaws.com/development/api', {
    headers: { 'x-api-key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' },
    params: {
      Param: 'Value',
    },
  })
    .then((resp) => {
      this.response = resp.data;
      debugger;
    }).catch((err) => {
      this.error = err.message;
      debugger;
    });
},

结果是代码通过catch 函数，错误为Network error ， 不管什么意思。

在 Postman 中使用相同的 API key header 和相同的参数进行完全相同的查询，效果很好。

那么，我的问题是，我做错了什么？为什么我可以调用 coinmarketcap API 但不能调用我拥有的 AWS API？我知道这不是 AWS API，而且我知道 axios 可以进行 CORS 调用，因为它与 coinmarketcap 一起使用。我错过了什么？

Answer 1

您需要在 AWS 中允许 CORS 请求以获取 API 网关服务。

转到您的 AWS 控制台，转到 API 网关控制台，选择您的资源。有一个actions 下拉框，其中包含一个Enable CORS 选项。

更多信息 here .