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”
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.
This is a CORS issue and if you are going to do web development you will need to understand it. This mainly comes into play when dealing with a resource that does not reside on the same domain as you executing script. Read more in the link below.
If you use NodeJS provably you won’t need to use that “origin=*”, the reason has to do with the OriginHeader of the HTTP request, wich every browser require nowadays. With NodeJS you would not have this kind of issues because it does the requests from outside the browser…
Actually this fix can work for the wikipedia API because they prepared their API to solve it but most of the APIs outhere would not have this kind of fix built-in and in those cases the simpler fix would be to use a CORS server (such as https://crossorigin.me/) in order to walkaround it (ATENTION: Only use this fix with non-sensitive informations. A CORS server is a proxy server and as such you shouldn’t pass sensitive informations as logins or passwords!).
I’m pretty sure that there is a lot of fixes around the internet and some work in some cases and others works in others… The easiest fix you will encounter (although almost never works to solve this issue) is to use ‘jsonp’ as a parameter of your http request…
Without being this ones the only other fix i know is if you are able to run the API server node locally, in that case you would not need a HTTP Header attached to the request because the origin and the target of the request is the same…
If you have to deal with sensitive information i recommend you to use NodeJS instead of plain JS although there should be fixes where using some libraries you can build a header at the time you write the request in your code…
I’m kind of new over here but i had some curiousity about this HTTPOriginHeader Error some weeks ago and took me 1 day or two to exactly understand why it was happening, hope it helps you and saves you tons of research! ;D
I would like if someone more experienced validates what i am saying since i am not much experienced and don’t want to give you broken intel, but as i lost a lot of time trying to understand this, i hope it saves you some time spent in research to understand the reason for it to happen… And besides that it will work for me to understand if i really got it right xD
How does ‘origin=*’ work? Is it like sending a header in an API request? I found the documentation from wikimedia woefully lacking. They have one line on it, saying, ‘For anonymous requests, origin query string parameter can be set to * which will allow requests from anywhere.’
Well the origin error has also to do with how the API and its server are configured so my best guess is that “origin=*” makes the API to accept any valid requests being them anonymous or with a legit header ;D
So, I’m riding the high seas on the venerable S. S. Struggle once again. I can get the fetch call to return json, but not when it’s enclosed in a function (one that does something after the enter key is pressed).
What do folks think is the problem here? Can fetch not be used in the way I’m trying to use it? I don’t see anything in the documentation that suggests I can’t use it inside a function (that’d be weird if I couldn’t, you’d think certain situations, like searching wikipedia, would require enclosing a fetch call inside another function).
I am not sure what is your issue, but seems to be from your end and not the code (or then i don’t understood well your issue) because the code in your pen is working for me… From what i see you only have to prepare the data to be shown right now, because the JSON data shows in my console…
Also, what browser are you using? Chrome, Firefox, and Safari are all giving me trouble, but I figure I’d ask just in case it has something to do with your browser and fetch.
So, I seem to be getting closer to the issue, but I’m still not sure what’s going on. I’m getting data now (despite having changed nothing to the code), but only after sending off an initial request. I have to search for ‘hell’ once, get a network error, and then a second search will work, bringing back JSON data.
I’m using Chrome Version 57.0.2987.133 and no i didn’t uncommented anything… I just runned the code, 5 times to see if i had any network error or any other, but i don’t… I don’t have a single clue what your problem could be tbh…
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.
You already finished your project (i think) but i was having an issue with the CORS too and after some search i found this article that explains a lot and also have the code in there for how the request should be made by including the headers, and i thought i should post it in here sor someone searching for this later:
