ReactJS：已被CORS策略阻止：对起飞前请求的响应不通过权限改造检查

Question

我在chrome上遇到了以下问题：

访问“http://*****/places？holiday_type=resort”获取信息

我的代码是：

getPlaces = async () => {
try {
  let response = await fetch(`${BASE_URL}/places?holiday_type=resort&currency=EUR&checkin=2019-11-01&checkout=2019-11-10&groups[]=1`,
    {
      method: 'GET',
      headers: new Headers({
        'Accept': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
        'Access-Control-Request-Method': 'GET, POST, DELETE, PUT, OPTIONS',
        'Authorization': 'Basic ' + Base64.encode(apiuser + ':' + apipassword) ,
      }),
    })

    console.log(response)
} catch (error) {
  console.log(error)
}

}

Answer 1

CORS的工作原理是添加新的HTTP标头，允许服务器描述允许使用网络浏览器读取信息的源集。这必须在服务器中配置，以允许跨域。

你可以通过一个叫做CORS的chrome插件暂时解决这个问题。

复制自：如何在react.js中允许COR？

参考：如何克服ReactJS中的CORS问题？

Answer 2

外部API经常阻止这样的请求。我猜你正在使用类似API-Key的东西来处理你的请求，其中包括根据你的通话进行支付。问题是，当您在前端调用API时，每个用户都可以读取您的密钥。这就是为什么服务器阻止这些。

您需要自己创建一个服务器（例如，使用node.js），调用后端API，然后使用您的机密API密钥“转发”您的请求公共API。服务器到服务器的请求不会被阻止，您的用户也无法利用您的API密钥。如果您想公开请求，还应该确保后端服务器不接受不是前端的请求。