如何使用Axios从本地主机VueJS调用服务器?

Question

我正试图从我的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 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而不是*(allow for all)

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