Question

我在chrome上失败了

可以在“ http：// ****** / places？holiday_type = resort＆currency = EUR＆checkin = 2019-11-01＆checkout = 2019-11-10＆groups [] = 1”处获取信息来自来源“ http://localhost:3000”的信息已被CORS政策阻止：对预检请求的响应未通过访问控制检查：预检请求不允许重定向。

我的代码是：

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标头来工作，这些标头允许服务器描述允许使用Web浏览器读取该信息的一组来源。必须在服务器中将其配置为允许跨域。

您可以通过名为CORS的Chrome插件暂时解决此问题。

复制自： How to allow CORS in react.js?

参考： How to overcome the CORS issue in ReactJS?

Answer 2

外部API通常会阻止此类请求。我猜想您正在使用类似API密钥之类的请求，其中包括基于调用的付款。问题在于，当您在前端调用API时，每个用户都可以读取您的密钥。这就是服务器阻止这些原因的原因。

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

ReactJS：已被CORS政策阻止：对预检请求的响应未通过访问控制检查

2 个答案: