How to make this query work on Anki and on Ankidroid?

[FrankJH]

Dear All.

I’m trying to implement a query from the Wiktionary to receive some information which I’d like
to display in my learning cards.

This is my query function

function getHTML(term, callback) {
	        console.log("***** function getHTML *****");
            $.ajax({
            url: 'https://en.wiktionary.org/w/index.php?title='+term,
            type: 'post',
            cache: false,
            success: function(data){
                let erg=ExtractLatinHTML(data);
                if ( true == erg[0] )
                    callback(erg[1]);
            },
            error: function (jqXHR, exception) {
        			var msg = 'AJAX Error: ';

        			if (jqXHR.status === 0) {
            			msg += 'Not connect.\n Verify Network.'+exception;
        			} else if (jqXHR.status == 404) {
            			msg += 'Requested page not found. [404]';
        			} else if (jqXHR.status == 500) {
            			msg += 'Internal Server Error [500].';
        			} else if (exception === 'parsererror') {
            			msg += 'Requested JSON parse failed.';
        			} else if (exception === 'timeout') {
            			msg += 'Time out error.';
        			} else if (exception === 'abort') {
            			msg += 'Ajax request aborted.';
			        } else {
			            msg += 'Uncaught Error.\n' + jqXHR.responseText;
					}
					//alert(msg);
					setError(msg);
        		}
        });
}

While testing this, I received the following error message in the Inspector - in Anki on my desktop as well as on Ankidroid on my tablet:

Access to XMLHttpRequest at 'https://en.wiktionary.org/w/index.php?title=robur' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I developed this on my desktop, and for the first time, I got the same error … CORS means Cross-Origin Resource Sharing, as I found out. On my Linux desktop, I found an extension for Google Chrome where CORS can be toggled on/off … using this, my query was working on the desktop Google Chrome.

Here’s what I have tried so far:

Found this here on MDN … but it goes far beyond my knowledge.

Found a discussion here at Stackoverflow concerning this … so I added

headers: {  'Access-Control-Allow-Origin': 'https://en.wiktionary.org' },

to my query above … but it doesn’t work. I think I have to set something in this query header, but I have not really understood what goes on here …

Or can we simply toggle this “CORS” on and off, as it’s possible in the Google Chrome browser on the desktop?

Has anyone of you experience with this? I would appreciate any hint to make this query work …

Thanks in advance for your efforts, Frank

[abdo]

This is caused by the same-origin policy.
You can work around it by using some API that fetches the pages server-side and sends them to you. Whatever Origin is such an API (Disclaimer: I never tested it).

An alternative solution is to use the Wiktionary API to get the information you want: api - How can I retrieve Wiktionary word content? - Stack Overflow

[FrankJH]

Abdo, thank you very much for answering!

Yes, I also thought of using the Wiktionary API, but then I receive all these templates which are difficult to parse.

But using

url: 'http://www.whateverorigin.org/get?url=' + encodeURIComponent('https://en.wiktionary.org/w/index.php?title=res') + '&callback=?', 

in my query function above, this query works.

Please apologize my naive question, but I’m not sure what to do with the result.

In the section

            success: function(data){
                console.log(data);
                let erg=ExtractLatinHTML(data);
                if ( true == erg[0] )
                    callback(erg[1]);

the console.log(data) shows:

?({"contents":"\u003c!DOCTYPE html\u003e\n\u003chtml class=\"client-nojs\" lang=\"en\" dir=\"ltr\"\u003e\n\u003chead\u003e\n\u003cmeta charset=\"UTF-8\"/\u003e\n\u003ctitle\u003eres - Wiktionary\u003c/title\u003e\n\u003cscript\u003edocument.documentElement.className...
{"url":"https://en.wiktionary.org/w/index.php?title=res","content_type":"text/html; charset=UTF-8","http_code":200}})

There are a lot of special signs in there … I guess I have to work with JSON.stringify(.) to deal with all these signs?

Any hints?

Kind regards, Frank

[FrankJH]

Figured it out by myself in the meantine.

I have to implement my query like this

function getHTML(term, callback) {
		console.log("***** function getHTML *****");
    $.ajax({
							url: 'https://api.allorigins.win/get?url='+encodeURIComponent('https://en.wiktionary.org/w/index.php?title='+term),
            type: 'post',
            cache: false,
            success: function(data){
                let erg=ExtractLatinHTML(JSON.parse(JSON.stringify(data.contents)));
                if ( true == erg[0] )
                    callback(erg[1]);
            },
            error: function (jqXHR, exception) {
        			var msg = '';
        			if (jqXHR.status === 0) {
            			msg = 'Not connect.\n Verify Network.';
        			} else if (jqXHR.status == 404) {
            			msg = 'Requested page not found. [404]';
        			} else if (jqXHR.status == 500) {
            			msg = 'Internal Server Error [500].';
        			} else if (exception === 'parsererror') {
            			msg = 'Requested JSON parse failed.';
        			} else if (exception === 'timeout') {
            			msg = 'Time out error.';
        			} else if (exception === 'abort') {
            			msg = 'Ajax request aborted.';
			        } else {
			            msg = 'Uncaught Error.\n' + jqXHR.responseText;
					}

					setError(msg);
        		}
        });
}

The important line is here

let erg=ExtractLatinHTML(JSON.parse(JSON.stringify(data.contents)));