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 >> <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 >> 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/
