angularxmlhttprequestcorspreflightblocked

Angular blocked cors

In my localhost, I have disabled Google chrome security but know I want to deploy it in my Server and I have this cors problem. The API is not from me, it's an external API.

Cors Error Image

My Service in Typescript is

getPlaces(holiday_type, currency, checkin, checkout, groups, page) {
    return this.http.get(
      `/api/v2/places?holiday_type=${holiday_type}&currency=${currency}&checkin=${checkin}&checkout=${checkout}&groups[]=${groups}&page=${page}`,
      {
        headers: {
          'Authorization': this.auth,
          'Accept': 'application/json',
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
          'Access-Control-Allow-Headers': 'Content-Type, Access-Control-Allow-Headers, Access-Control-Allow-Origin, Authorization, X-Requested-With',
        },
      });
}

And my proxy.config looks so

{
  "/api/*":  {
    "target": "https://tr.halalbooking.com",
    "secure": false,
    "logLevel": "info"
  }
}
Solution

  • From the error message, it looks like halabookings is blocking the request. You have two options:

    1. Contact the owner of halalbookings and ask them to allow your origin. Often times, if they are providing you with an API, you have a portal where you can white list or specify the allowed origins.

    2. Move the API call to halalbookings to take place server side. Then, in your front end, call your API (which calls halalbookings)