如何使用 Axios 从 localhost VueJS 调用服务器？

Question

我正在尝试从我的 VueJS 应用程序调用 AWS 托管 API，该应用程序在我的 localhost:8080 上运行。我用this blog post 来设置vue.config.js 这个块：

module.exports = {
    devServer: {
        proxy: 'https://0123456789.execute-api.eu-west-1.amazonaws.com/'
    },
    ...
}

有了这个，我可以使用此代码向该主机上的端点发出GET 请求：

  this.$axios
    .get('https://0123456789.execute-api.eu-west-1.amazonaws.com/mock/api/endpoint',
    {
      headers: {
        'Content-Type': 'application/json'
    }})

这是因为我已将 AWS API Gateway 模拟端点配置为为 OPTIONS 方法返回这些标头：

Access-Control-Allow-Headers: 'Cache-Control,Expires,Pragma,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'   
Access-Control-Allow-Methods: 'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT'  
Access-Control-Allow-Origin: '*'

但是，我无法拨打此电话：

  this.$axios
    .get('https://0123456789.execute-api.eu-west-1.amazonaws.com/lambda/api/function',
    {
      headers: {
        'Content-Type': 'application/json'
    }})

此端点是一个 Lambda 集成，还有一个 OPTIONS 方法，其标头与上述相同。

为什么配置相同的两个端点对 axios 有不同的响应？

更新

按照@deniz 的建议，我已更新.env.development 文件以包含：

VUE_APP_API_URI=https://0123456789.execute-api.eu-west-1.amazonaws.com/

我还将axios 请求更新为：

let url = 'mock/api/endpoint'
let headers = {
  headers: {
    'Content-Type': 'application/json',
  },
}

this.$axios
  .get(url, headers)

...和...

let url = 'lambda/api/function'
let headers = {
  headers: {
    'Content-Type': 'application/json',
  },
}

this.$axios
  .get(url, headers)

第一个GET 请求得到的结果是：

200 OK

但是第二个请求的响应是：

Access to XMLHttpRequest at 'https://0123456789.execute-api.eu-west-1.amazonaws.com/lambda/api/function' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

您的开发环境配置。由于代理设置什么都不做，然后假装是其他人。 这就是为什么您在使用代理时不会遇到任何 CORS 问题。它有点像“我是别人，而不是本地主机”的瓶颈

module.exports = {
    devServer: {
        proxy: 'https://0123456789.execute-api.eu-west-1.amazonaws.com/'
    },
    ...
}

从现在开始，您的所有请求都来自这个基于代理的 URL

https://0123456789.execute-api.eu-west-1.amazonaws.com/

如果您尝试像这样访问 api：

this.$axios
    .get('https://0123456789.execute-api.eu-west-1.amazonaws.com/lambda/api/function',
    {
      headers: {
        'Content-Type': 'application/json'
    }})

您应该记住，您已经假装您的代理正在做他的伪装，并且仍然像其他来源一样行事。

如果我没有完全错误，您调用 API 时的 URL 现在看起来像这样：

https://0123456789.execute-api.eu-west-1.amazonaws.com/https://0123456789.execute-api.eu-west-1.amazonaws.com/lambda/api/function

您只需将请求中的 axios url 更改为：

this.$axios
    .get('lambda/api/function',
    {
      headers: {
        'Content-Type': 'application/json'
    }})

然后再试一次。

---

更新

VUE_APP_API_URI=https://0123456789.execute-api.eu-west-1.amazonaws.com/

将您的 URL 字符串包含在引号中，像这样并删除最后一个斜杠。

VUE_APP_API_URI='https://0123456789.execute-api.eu-west-1.amazonaws.com'

这是处理 .env 变量的常见做法。

2。 您得到的 CORS 错误是不再使用代理的结果。 您现在从其他来源请求数据，这在 FireFox 或 Chrome 等现代浏览器上是不允许的。

在这里，您必须在 API 中处理服务器端配置： https://0123456789.execute-api.eu-west-1.amazonaws.com

因为如果您这样做，如果请求来自不同的来源，您需要授予本地主机和后端处理请求的权限，例如您的情况：

我是localhost，我向https://0123456789.execute-api.eu-west-1.amazonaws.com请求数据

通常这是被禁止的，并且对安全性有很高的风险

但解决方案是... 正如您之前在 AWS API 中所做的那样 Access-Control-Allow-Origin: '*' 是处理“CORS”问题的重要部分。

确保设置正确并按预期工作。也许玩弄它并设置localhost而不是*（允许所有人）

3。 我强烈建议您在开发中使用代理方式，仅在生产中使用非代理方式，并且只允许 CORS 用于您的前端。