I just started working on the wikipedia viewer, and was running into trouble. I’m using fetch, and kept getting a network error. The solution turned out to be including “origin=" in wikimedia’s API URL. That is: "https://en.wikipedia.org/w/api.php?&origin=&action=opensearch&search=Einstein&limit=10&namespace=0&format=json”
Ignore Einstein, he’s helping me make sure something is coming through. Here is the documentation from wikimedia that says to include ‘origin=*’ in the query: https://www.mediawiki.org/wiki/Manual:CORS#Description
Why does adding ‘origin=*’ make the API work?
Here’s a codepen, with the API working: https://codepen.io/aaronHere/pen/QvdebJ
Edit, the solution: For posterity’s sake, just in case anyone else has the same issue, this was the problem: hitting enter automatically submits the form, changing the original html document from something like mySite.html to mySite.html?Search=TheSearchKeyword, forcing the browser to open a new html document, thereby cancelling the pending fetch request.
The fix is to add the preventDefault() method to the event object, preventing the automatic submission.