ReactJS: has been blocked by CORS policy: Response to preflight request doesn't pass access control check

Question

i get this fail on chrome:

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.

My Code is:

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

}

Which backend language and framework are you requesting, Java, Node.js etc? — onuriltan, Aug 07 '19 at 06:38
It's an external API, I dont know which language it is. It works in Postman — emibo34, Aug 07 '19 at 06:40
That external api is blocking requests that are coming from clients, so you need to create a backend for frontend and made your request from that backend to pass cors — onuriltan, Aug 07 '19 at 06:43

score 15 · Answer 1 · answered Aug 07 '19 at 07:23

External APIs often block requests like this. I would guess that you are using something like an API-Key for your request which includes payment based on your calls. The problem is that every user can read your key when you call the API in your frontend. Thats why the server is block these.

You need to make a server on your own (e.g. with node.js), call your backend API and then "forward" your request the public API with your secret API key. Server-to-Server requests won't be blocked and your users can't exploit your API key. You should also make sure to that your backend server doesn't accepts request which is not your frontend if you want to make it public.

score 5 · Accepted Answer · edited Aug 07 '19 at 07:27

5

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.

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

copied from: How to allow CORS in react.js?

Reference: How to overcome the CORS issue in ReactJS?

edited Aug 07 '19 at 07:27

Pardeep

2,153
1
17
37

answered Aug 07 '19 at 06:58

huzaifamandviwala

415
2
5

ReactJS: has been blocked by CORS policy: Response to preflight request doesn't pass access control check

2 Answers2

Linked

Related