Amazon web services 如何使用Axios从本地主机VueJS调用服务器？

我正在尝试从我的VueJS应用程序调用AWS托管的API，该应用程序在我的

localhost:8080

上运行。我曾经使用此块设置

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网关模拟端点配置为返回

选项的这些头文件

方法：

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.

---

您的开发环境的配置。由于代理设置不做任何其他事情，所以假装是其他人。 这就是为什么当你与代理一起工作时，你不会遇到任何CORS问题。这有点像“我是其他人，而不是本地主机”这样的瓶颈

module.exports={
开发服务器：{
代理：'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',
{
标题：{
“内容类型”：“应用程序/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'，
{
标题：{
“内容类型”：“应用程序/json”
}})

然后再试一次

---

更新

VUE\u APP\u API\u URI=https://0123456789.execute-api.eu-west-1.amazonaws.com/

将URL字符串用引号括起来，如下所示，并删除最后一个斜杠

VUE\u APP\u API\u URI=
https://0123456789.execute-api.eu-west-1.amazonaws.com'

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

二,。
您得到的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中所做的那样
访问控制允许来源：'*'
是处理“CORS”问题的重要部分

确保其设置正确并按预期工作。也许可以利用它来设置
localhost
而不是
*
（允许所有）

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