Request header field Authorization is not allowed (AngularJS rest api request)

Question

I have application written in AngularJS. I want to get access to FlightAware API. I use the following code:

  let Client = require('node-rest-client').Client;

  let username = 'x';
  let apiKey = 'y';
  let fxmlUrl = 'https://flightxml.flightaware.com/json/FlightXML3/'

  let client_options = {
    user: username,
    password: apiKey
  }
  let client = new Client(client_options);

  client.registerMethod('findFlights', fxmlUrl + 'FindFlight', 'GET');
  client.registerMethod('weatherConditions', fxmlUrl + 'WeatherConditions', 'GET');

  let findFlightArgs = {
    parameters: {
        origin: 'KIAH',
        destination: 'KJFK',
        type: 'nonstop'
    }
  }

  let weatherConditionsArgs = {
    parameters: {
        airport_code: 'KHOU'
    }
  }

  client.methods.weatherConditions(weatherConditionsArgs, function (data, response) {
    console.log('Current conditions at Hobby Airport: %j', data.WeatherConditionsResult.conditions[0]);
  })

When I execute it in nodeJS it works but in my AngularJS app I get an error: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

I found some information that this error is connected with CORS but the server side is the same regardless I use AngularJS or NodeJS in order to run the code. How can I execute it without an error in AngularJS?

Check to see if the request header contains the following: Accept: application/xml? — Clive Seebregts
– Clive Seebregts, Commented Jan 4, 2018 at 14:36
I tried but it didn't help. By the way the response is in json format. — Tomasz
– Tomasz, Commented Jan 4, 2018 at 15:41

balazska · Accepted Answer · 2018-01-04 23:17:46Z

The error message says, that the FlightXML server (https://flightxml.flightaware.com) does not set the corresponding CORS headers, which would be necessary to run from a browser. (CORS is "on", if browser application running from http://yoursite.com fetches data from another host, such https://flightxml.flightaware.com)

CORS restrictions apply only applications running in browser. So the "same" JavaScript code running on NodeJS (server side) won't have such restriction.

Unfortunately, it is necessary for external server to set Access-Control-Allow-Headers: Authorization header, otherwise your browser-based scenario won't work. So looks like that FlightXML does not support your scenario.

As a fix, I suggest you to create a server-side proxy, so

your browser-side code does not read data directly from flightxml, but calls some HTTP endpoint of your own server, eg http://yoursite.com/weather?args....
your server code connects to flightxml (no CORS restrictions) and simply returns the data wanted

Collectives™ on Stack Overflow

Request header field Authorization is not allowed (AngularJS rest api request)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related