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=userinfo&formatversion=2&uiprop=rights&origin=*"; > --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 <r...@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=userinfo&formatversion=2&uiprop=rights > > 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=userinfo&formatversion=2&uiprop=rights >> 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.network_error&schema_uri=/w3c/reportingapi/network_error/1.0.0"; >> }] } >> 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 <r...@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 <audiod...@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.virta...@gmail.com> >>> wrote: >>> Hi, >>> >>> Vue.js is afaik current choice. >>> - https://www.mediawiki.org/wiki/Vue.js >>> >>> -- Kimmo >>> >>> On Thu, Aug 8, 2024 at 6:34 PM Roy Smith <r...@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/ _______________________________________________ Cloud mailing list -- cloud@lists.wikimedia.org List information: https://lists.wikimedia.org/postorius/lists/cloud.lists.wikimedia.org/
