hettlage (133) [Avatar] Offline
#1
The AJAX call in listing 5.3 seems to fail, as the Wikipedia API doesn't allow the cross-site request.
331872 (131) [Avatar] Offline
#2
We added a statement to chapter section "Where to find this code" indicating that some of the APIs don't allow CORS. And that the easiest way is simply to use disable CORS at the browser via a plugin or add-on. It's simple to install:

Firefox: https://addons.mozilla.org/en-US/firefox/addon/cross-domain-cors
Chrome: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

Then you can just toggle it and the API calls will go through.

Thank you for pointing this out. Let us know if this works for you.
hettlage (133) [Avatar] Offline
#3
Thanks! The plugin for Chrome works fine, but for whatever reason the Firefox plugin didn't seem to make a difference.
331872 (131) [Avatar] Offline
#4
Glad to hear it worked for you! I also use Chrome, don't why FF wouldn't work. I'll do some research.
331872 (131) [Avatar] Offline
#5
cors.png
[ 25 KB ]
You could try this in FF. See figure attached.

Paul Daniels (15) [Avatar] Offline
#6
Hey thanks for pointing this issue out! To make sure this works for everyone we added a local proxy for wikipedia and yahoo to bypass the CORS issue.

The repo should have the latest changes now.
125239 (1) [Avatar] Offline
#7
Sorry that I am writing this now, after the books has already been published! I am enjoying the book immensely. Right now I am working my way through the Chapter 6 and I find the book very helpful in wrapping my brain around reactive programming.

That said, I wanted to point out that CORS requests from JavaScript in the browser are possible without any modification of the browser. It took me quite a lot of digging on the net and here it is: there are two ways to make proper CORS AJAX requests:

1. With Rx.Observer.ajax - pass in header crossDomain with value true, like this:
Rx.Observer.ajax({ url: query, crossDomain: true })

2. As different browser have different quirks, it is best to use a cross-browser library (instead of using XMLHTTPRequest directly). I made it work with jQuery. It works like this: $.ajax returns a promise and we pass that to Rx.Observerble.fromPromise, like this:
Rx.Observable.fromPromise($.ajax({ url: query }))

Both of these methods work with Wikipedia API and also with bit.ly and goo.gl URL shorteners in Chapter 6. I tried them with Firefox, Chrome and MS Edge.

If anybody is interested, I'd be happy to share the complete code. You can contact me at ajanicij at yahoo dot com.

Regards,
Aleksandar

P.S. Almost forgot, for the Wikipedia request there is one more detail: the request URL itself must contain key-value pair origin=*, so a request for "Albert Einstein" would look like this:
https://en.wikipedia.org/w/api.php?action=query&origin=*&format=json&list=search&utf8=1&srsearch=Albert Einstein
If origin=* is missing, the Wikipedia server will still send a response, but without header
Access-Control-Allow-Origin: "*"
and browser will not pass it to our script.