使用 fetch 请求调用 Amazon Web Services CloudSearch 时出现 CORS 问题

Question

我目前正在处理将查询 AWS 用户数据库的搜索输入。客户端为我提供了一个 cloudsearch 端点，并且在邮递员中完美运行，返回正确的用户并返回 200。

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

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

下面是我的获取请求...

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 调用的安全性。

任何建议将不胜感激。

谢谢！

编辑

在端口 3005 上的快速服务器中添加，然后在我的获取请求中替换它...

app.get('/search', function(req, res, query){ 
    request(`https://search-***-***.eu-west-1.cloudsearch.amazonaws.com/2013-01-01/search?q=`, function (error, response, body) { 
      if (!error && response.statusCode === 200) { 
        console.log(body); 
        res.send(body); 
      } 
     }); 
  });

然后像这样更新我的获取请求...

const getUsers = async (query) => {
        const results = await fetch(`http://localhost:3005/search` + `${query}`)      
        const userData = await results.json()
        console.log(results);

        return userData.results
    }

但是，如果查询被硬编码到 express 文件中，则此方法有效，但如果查询在 fetch 端传递，它会返回空响​​应。是否需要进行任何进一步的配置？

这是控制台中的结果输出

type: "cors"
url: "http://localhost:3005/search?un"
redirected: false
status: 200
ok: true
statusText: "OK"
headers: Headers {}
body: (...)
bodyUsed: true
__proto__: Response

Answer 1

原因：

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

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

解决方案：

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

这个article 很有帮助。