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

Question

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

但是在我的 create-react-app 中，使用钩子，我的获取请求 returns 以下....

from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

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

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 文件中，这种方法会起作用，但如果查询是在获取端传递的，它 returns 会得到一个空响应。是否需要进一步配置？

这是控制台输出的结果

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-key 放在客户端代码上是不可行的，因为它可以通过浏览器轻松访问。

解法：

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

这个article很有帮助。

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

CORS issues when using a fetch request to call Amazon Web Services CloudSearch

fetch

amazon-web-services

amazon-cloudsearch

reactjs