CORS needs the API that you're calling (en.wikipedia.org) to whitelist the origin you're accessing it from (localhost:5173). MW API supports using a query string parameter (`origin`) in order to request that an origin (e.g. localhost:5173) is whitelisted through the ACAO (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) header (see https://www.mediawiki.org/wiki/Manual:CORS).
$ curl "https://en.wikipedia.org/w/api.php?action=query&format=json&meta=use..." --head HTTP/2 200 date: Sun, 18 Aug 2024 17:45:10 GMT server: mw-api-ext.codfw.main-6d99499755-vzprs x-content-type-options: no sniff mediawiki-login-suppressed: true access-control-allow-origin: * access-control-allow-credentials: false access-control-expose-headers: MediaWiki-API-Error, Retry-After, X-Database-Lag, MediaWiki-Login-Suppressed
On 19 Aug 2024, at 00:59, Roy Smith roy@panix.com wrote:
So, after beating my head against this for a couple of days, I've come to the conclusion that I just don't understand how CORS works.
If I get the following URL: https://en.wikipedia.org/w/api.php?action=query&format=json&meta=use...
from a browser, I get what I expect:
{ "batchcomplete": true, "query": { "userinfo": { "id": 130326, "name": "RoySmith", "rights": [ etc }
On the command-line with curl, likewise something that makes sense:
{ "batchcomplete" : true, "query" : { "userinfo" : { "anon" : true, "id" : 0, etc }
But when I do the same fetch from inside a VUE app:
<template> <main> <button @click="getUserInfo">UserInfo!</button> </main> </template>
<script> export default { methods: { getUserInfo() { fetch('https://en.wikipedia.org/w/api.php?action=query&format=json&meta=userinfo&formatversion=2&uiprop=rights', { mode: 'no-cors'}) .then(function (response) { response }) } } } </script>
I get a 200 response
Request URL: https://en.wikipedia.org/w/api.php?action=query&format=json&meta=use... Request Method: GET Status Code: 200 OK Remote Address: (elided) Referrer Policy: strict-origin-when-cross-origin
Request headers:
:authority: en.wikipedia.org :method: GET :path: /w/api.php?action=query&format=json&meta=userinfo&formatversion=2&uiprop=rights :scheme: https accept: */* accept-encoding: gzip, deflate, br, zstd accept-language: en-US,en;q=0.9 dnt: 1 priority: u=1, i referer: http://localhost:5173/ sec-ch-ua: "Not)A;Brand";v="99", "Google Chrome";v="127", "Chromium";v="127" sec-ch-ua-mobile: ?0 sec-ch-ua-platform: "macOS" sec-fetch-dest: empty sec-fetch-mode: no-cors sec-fetch-site: cross-site user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Response headers:
accept-ranges: bytes age: 2 cache-control: private, must-revalidate, max-age=0 content-disposition: inline; filename=api-result.json content-encoding: gzip content-length: 207 content-type: application/json; charset=utf-8 date: Sun, 18 Aug 2024 13:45:15 GMT nel: { "report_to": "wm_nel", "max_age": 604800, "failure_fraction": 0.05, "success_fraction": 0.0} report-to: { "group": "wm_nel", "max_age": 604800, "endpoints": [{ "url": "https://intake-logging.wikimedia.org/v1/events?stream=w3c.reportingapi.netwo..." }] } server: mw-api-ext.eqiad.main-5744d5b77-fzvxz server-timing: cache;desc="pass", host;desc="cp1102" set-cookie: WMF-Last-Access=18-Aug-2024;Path=/;HttpOnly;secure;Expires=Thu, 19 Sep 2024 12:00:00 GMT set-cookie: WMF-Last-Access-Global=18-Aug-2024;Path=/;Domain=.wikipedia.org;HttpOnly;secure;Expires=Thu, 19 Sep 2024 12:00:00 GMT set-cookie: GeoIP=(elided) set-cookie: NetworkProbeLimit=0.001;Path=/;Secure;SameSite=Lax;Max-Age=3600 strict-transport-security: max-age=106384710; includeSubDomains; preload vary: Accept-Encoding x-cache: cp1102 miss, cp1102 pass x-cache-status: pass x-client-ip: (elided) x-content-type-options: nosniff x-frame-options: DENY
but the response body is empty. Chrome just says "Failed to load response data: No data found for resource with given identifier". I assume this is just Chrome's way of saying "Your brain is not big enough to understand how CORS works". Can anybody help me increase my brain capacity?
On Aug 15, 2024, at 2:36 PM, Roy Smith roy@panix.com wrote:
Thank you to everybody who offered advice. I've set up a Vue/Vite environment on my laptop and started working my way through the tutorials. Some stuff makes a lot of sense; other stuff not so much yet, but I'm working on cleaning out some old neural storage areas to make room for new knowledge.
I think what would help me at this point was being able to look at the source for some well-written Vue apps written to work in the wikipedia environment. If folks could point me to some examples, I would appreciate it. Are there higher-level wrappers around the Action API, like pywikibot for Python, or do you just do raw fetch calls on the API endpoints?
On Aug 8, 2024, at 1:14 PM, Travis Briggs audiodude@gmail.com wrote:
Vue.js is definitely a good option. I already had a lot of JavaScript experience, but I learned Vue at someone's recommendation for a wikimedia project and it was a great experience.
One quick tip that might help you: in the "old world" you might use jQuery or something to do AJAX requests (XHR). However, in modern browsers, the built-in `fetch` function is more than adequate for almost everything.
Also, I would highly recommend using create-vue to bootstrap your project, because it sets up all the complicated JavaScript "compilation" steps for you, and gives you commands so that you can just do "npm run build" and get a static site in a single directory.
Good luck! -Travis
On Thu, Aug 8, 2024 at 8:36 AM Kimmo Virtanen kimmo.virtanen@gmail.com wrote: Hi,
Vue.js is afaik current choice.
-- Kimmo
On Thu, Aug 8, 2024 at 6:34 PM Roy Smith roy@panix.com wrote: I'm about to embark on building a client-side javascript tool intended to help with enwiki's [[WP:DYK]] process. JS is not my strength (and what I do know about tooling is quite outdated) so I'm looking for advice on what's in common use in the WMF environment these days. If I'm going to learn some new tools, I figure I might as well learn what folks here are using. If only because it'll make it easier for me to mooch on other people for help :-)
As far as testing goes, I used to use JUnit. I gather that's pretty old-hat by now. What are you-all using?
And for app frameworks. Angular? React? I hear Vie might be the new hotness? I'm leaning more towards "easy to learn" vs "most powerful". _______________________________________________ Cloud mailing list -- cloud@lists.wikimedia.org List information: https://lists.wikimedia.org/postorius/lists/cloud.lists.wikimedia.org/ _______________________________________________ Cloud mailing list -- cloud@lists.wikimedia.org List information: https://lists.wikimedia.org/postorius/lists/cloud.lists.wikimedia.org/ _______________________________________________ Cloud mailing list -- cloud@lists.wikimedia.org List information: https://lists.wikimedia.org/postorius/lists/cloud.lists.wikimedia.org/
Cloud mailing list -- cloud@lists.wikimedia.org List information: https://lists.wikimedia.org/postorius/lists/cloud.lists.wikimedia.org/