CORS issue

1

Hey all,

Im mucking around with an Angular 2 app that consumes parts of this API. Im able to do gets in postman without any issue, but when i try to do it from my app i get this error in the console

XMLHttpRequest cannot load https://api.transport.nsw.gov.au/v1/gtfs/schedule/buses/Major_Event. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 500.

Here is the request im sending

https://api.transport.nsw.gov.au/v1/gtfs/schedule/buses/Major_Event

These are my preflight headers

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:0, 1, 2
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:api.transport.nsw.gov.au
Origin:http://localhost:4200
Referer:http://localhost:4200/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36

and the response headers

Cache-control:no-cache="set-cookie"
Connection:keep-alive
Content-Length:595
Content-Type:text/xml;charset=utf-8
Date:Wed, 28 Sep 2016 06:27:35 GMT
Server: Apache-Coyote/1.1
Set-Cookie: **removed this bit**

Has anyone else come across and overcome this? any help would be great!

2

I was hoping someone else can respond but I have a vague recollection that this is because you haven’t used the proper credentials or set up the details correctly.

Check you have the correct setup in the Application side of things in the API Gateway including following the details on this page:

Esp this part for setting up the Application
Callback/Redirect URL - Provide the Callback/Redirect URL for your application (e.g. https://developer.transport.nsw.gov.au/admin/oauthCallback)
Scope = user
Type = Confidential

Or
 there was a previous thread about a 500 response. Not sure if these solutions help at all?

3

Hey @evkw

I’m fairly sure that the API does not support cross-domain/cross-origin requests. For security reasons, browsers do not allow requests XMLHttpRequests to be made between sites of different domain by default.

Your originating domain is localhost:4200 whereas the server you’re requesting is api.transport.nsw.gov.au. Since the domains aren’t matching, and your domain (localhost:4200) isn’t listed in TfNSW’s Access-Control-Allow-Origin header response, you’re presented with an error.

The reason why Postman works is that as a browser extension, you’ve granted the extension “permission” to make requests to other servers with non-matching domains.

I should also add that the GTFS-R data isn’t meant to be consumed directly by an end user client. Rather, it should be consumed by a server-side application, digested/processed, then fed to a front-end client (e.g. a web based client built in Angular).

You could build something on your server side which downloads the GTFS-R data from TfNSW’s servers, processes the protocol buffers and returns the data in a JSON format. That would easily be digestable by a modern browser and in your Angular application.

Hope that helps.

Ken

edit: I guess you could also make your Angular application a browser extension

2 Likes
4

Thanks for the reply @jxeeno

I ended up making a small .net app to do the web request and spit out a .zip for me to use :slight_smile:

If anyone else comes across this in the future, there is apparently a chrome extension that you can get that will turn off the CORS security, but i dont think thats a great solution to anything.