Authorization Error with JS fetch

FlightAware AeroAPI
1

As mentioned in the title, I’m having trouble trying to authorize my application while using fetch(). Here’s my code:

const headers = new Headers({'Authorization': 'Basic ' + btoa('BenKolya:API_KEY')});
fetch(https://flightxml.flightaware.com/json/FlightXML3/AirportBoards?airport_code=NWI, 
       { method: 'GET', jsonp: 'jsonp_cb', headers: headers}
).then(....);

However, when I try to run this code, I get an error:

Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

This is confusing to me as in the documentation, it is stated that the correct way to authenticate is by using HTTP Authorization headers. I’ve tried including the username and API Key in the URL (username:key@URL) but that’s thrown a different error.

By the way, I know there are cross-origin security issues with calling it on the front-end, but I’m just building something for personal & education use so it’s never going into productions.

Any help would be greatly appreciated, thanks

2

This is exactly a cross-origin issue. Your browser is refusing the request because it doesn’t pass the CORS requirements.

3

Thanks obj.

Is there anything I can do to get around this, while still using front-end code?