CODEWITHSUNDEEP
javascriptangularjsnode.jsrest
Tomasz
Tomasz

Reputation: 21

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

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?

Upvotes: 0

Views: 276

Answers (1)

balazska
balazska

Reputation: 991

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

  1. 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....
  2. your server code connects to flightxml (no CORS restrictions) and simply returns the data wanted

Upvotes: 1

Related Questions