Help me understand CORS issues (wikipedia viewer)

Hi everyone,

I recently finished the all the intermediate projects. However I ran into CORs issues on all of them. I found the simplest fix when working was to add a chrome extension that allowed CORS. Although I recognise this isn’t the best practice.

After a bit of research I found out the you could add ‘format=json&origin=*’ to the query parameters of your URL request. This worked for all projects except the wikipedia viewer here:

https://codepen.io/heenslice/pen/VzGQMe?editors=0010

When transferring my code from codepen to my local text editor and opening the file there are also no CORS issues. It seems to be related to codepen. So any ideas how I can fix the CORS issues in this codepen?

Hey. First, clean up the HTML panel. Remove the html, head, body tags and other scripts that don’t belong there. Then form your url like this:

https://en.wikipedia.org/w/api.php?format=json&origin=*&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts|info&inprop=url&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=${searchInput}

As you notice, I added the prop info with the url. You can avoid the entire getPageUrls function and have your urls in the first and only $.get.

Then, use the loop you already have ( Object.entries(searchResults).forEach(([key, value]) =>{ ) to iterate through the returned object and you should be set.

1 Like

Awesome! Thanks so much

1 Like