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

Posted 2023-03-03

【中文标题】ReactJS：已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查

【英文标题】：ReactJS: has been blocked by CORS policy: Response to preflight request doesn't pass access control check

【发布时间】：2019-12-14 17:27:27

【问题描述】：

我在 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)

【问题讨论】：

您请求哪种后端语言和框架，Java、Node.js 等？

这是一个外部API，我不知道它是什么语言。它适用于邮递员

该外部 api 正在阻止来自客户端的请求，因此您需要为前端创建一个后端并从该后端发出您的请求以传递 cors

好吧，我想用 Java Spring boot 测试它谢谢@onuriltan

【参考方案1】：

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

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

【参考方案2】：

CORS 通过添加新的 HTTP 标头来工作，这些标头允许服务器描述允许使用 Web 浏览器读取该信息的源集。这必须在服务器中配置为允许跨域。

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

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

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