OK, that worked, thanks. Surprisingly origin=localhost:5173 doesn't work, but I can live with that.
Is this a standard part of the CORS protocol, or something specific to the Action API? > On Aug 18, 2024, at 1:45 PM, Siddharth VP <siddhart...@gmail.com> wrote: > > Add origin=* in the API request query params. This tells the API to include > Access-Control-Allow-Origin: * in the response headers. Don't put mode: > no-cors. > > On Sun, 18 Aug 2024 at 22:29, Roy Smith <r...@panix.com > <mailto: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 <http://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 <http://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 >>> <http://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 >>> <mailto: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 >>>> <mailto: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 >>>> <mailto: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 >>>>> <mailto: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 >>>>>> <mailto:cloud@lists.wikimedia.org> >>>>>> List information: >>>>>> https://lists.wikimedia.org/postorius/lists/cloud.lists.wikimedia.org/ >>>>> _______________________________________________ >>>>> Cloud mailing list -- cloud@lists.wikimedia.org >>>>> <mailto:cloud@lists.wikimedia.org> >>>>> List information: >>>>> https://lists.wikimedia.org/postorius/lists/cloud.lists.wikimedia.org/ >>>> _______________________________________________ >>>> Cloud mailing list -- cloud@lists.wikimedia.org >>>> <mailto:cloud@lists.wikimedia.org> >>>> List information: >>>> https://lists.wikimedia.org/postorius/lists/cloud.lists.wikimedia.org/ >>> >> >> _______________________________________________ >> Cloud mailing list -- cloud@lists.wikimedia.org >> <mailto: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/
