[使用获取请求来调用Amazon Web Services CloudSearch时出现CORS问题

Question

我目前正在研究将查询用户的AWS数据库的搜索输入。客户端为我提供了一个cloudsearch端点，并且在邮递员中都可以正常工作，并向正确的用户返回200。

但是在我的create-react-app中，使用钩子，我的提取请求返回以下内容。...

来自源'http://localhost:3000'已被CORS策略阻止：对预检请求的响应未通过访问控制检查：它没有HTTP正常状态。

下面我的获取请求...

const getUsers = async (query) => {
const results = await fetch(`https://search-****-*****.eu-west1.cloudsearch.amazonaws.com/2013-01-01/search?q=${query}`, {

            headers: {
                'Content-Type': 'application/json', 
                'Access-Control-Allow-Origin': '*'
          }
        })
        const userData = await results.json()
        return userData.results
    }

我有一个已打开的CORS chrome插件，但似乎没有什么区别。我想确保我可以允许请求，同时确保我的API调用的安全性。

任何建议将不胜感激。

谢谢！

Answer 1

原因：

这是您出于安全目的而调用的API的限制，不允许前端代码访问该API。

将API密钥放在客户端代码上是不可行的，因为可以通过浏览器轻松访问该代码。

解决方案：

您可以创建一个快速服务器，它将充当您的代理服务器，在您的前端代码中，您将单击该代理服务器，该代理服务器将单击所需的API并为您获取响应。

Answer 2

很遗憾，CloudSearch不支持CORS。两种可能的解决方案：

1. 创建一个AWS API Gateway并将其配置为CloudSearch的代理。在API网关上启用CORS。因此，您的React应用程序将调用CORS就绪网关，该网关可代理CloudSearch。

   如果您在无服务器环境中工作，例如React应用程序的S3存储桶，这将起作用。

   Guide here.

---

2. 例如，使用Node.js在与React应用相同的域上创建服务器端端点。让此端点依次调用CloudSearch。