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

ReactJS: has been blocked by CORS policy: Response to preflight request doesn#39;t pass access control check(ReactJS:已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查)

问题描述

我在 chrome 上遇到了这个问题:

i get this fail on chrome:

访问 'http://******/places?holiday_type=resort&currency=EUR&checkin=2019-11-01&checkout=2019-11-10&groups[]=1'来自原点 'http://localhost:3000' 已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:预检请求不允许重定向.

Access to fetch at 'http://******/places?holiday_type=resort&currency=EUR&checkin=2019-11-01&checkout=2019-11-10&groups[]=1' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

我的代码是:

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)
}

}

推荐答案

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

CORS works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser. This must be configured in the server to allow cross-domain.

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

You can temporarily solve this issue by a chrome plugin called CORS.

复制自: 如何允许 CORS 在react.js?

参考: 如何克服ReactJS 中的 CORS 问题?

这篇关于ReactJS:已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！