Cross Origin in ajax not working for .properties file in IOS (10.3.1)

Question

I used i18n plugin for load *.properties file for translation and its working fine on android platform but same library not working on IOS 10.3.1. It gives me below error:

i have done some changes in i18n library but still its not working.

function loadAndParseFile(filename, settings) {
    $.ajax({
        url: filename,
        async: false,
        cache: settings.cache,
        crossDomain: true,
        jsonpCallback: 'callback',
        contentType: 'text/plain;charset=' + settings.encoding,
        dataType: 'text',
        success: function (data, status) {
            parseData(data, settings.mode);
        }
    });
}

In above code:

i have been added Cross-Domain 'true' and datatype 'text'.. when i changed datatype 'text' to 'jsonp' its working but it gives .properties file error. Please check below error..

That means. file is loaded, but inner data format is different.

Aromaticity

Yes, the log tells you that the Messages.properties file is invalid ("Unexpected identifier 'User'). Is this a static file or generated? Either way: You need to fix it. – Diphyodont

@Diphyodont Yes, Its Static file.. – Aromaticity

Are you passing a valid URL here... $.ajax({ url: filename, ... })? – Falange

@joshuamabina.. Yes.. URL is Valid.. its file path – Aromaticity

@Goku you should put that file on your server and then try to access it from the server. IOS has different file structure than windows. That is why it is working on windows and not on IOS and AJAX call needs a protocol work – Lozar

@all Please give me solution.. i tried above but it didn't work.. – Aromaticity

@Goku as @Lozar said, try uploading those files into a server, the files are loading with file:// protocol that may work in windows, but IOS is more strict and maybe its blocking those calls – Caucasian

You add header on ajax call – Puiia

headers: { 'Access-Control-Allow-Origin':'Your Site Host' }," – Puiia

JSONP works differently, you have to wrap it with callback function and resolve it to get right resource you need. This is just temp. Always use CORS headers enabled from server side. – Pugh

keep the datatype text and try consoling error error: function(xhr, status, error) { console.error("Error loading file: " + error); console.error("Status: " + status); console.error(xhr); } – Shantel

Answer 1

add this line to your ajax parameters

xhrFields: {
    withCredentials: true
}

Padishah

Answer 2

If you are using now JSONP instead of text, the file will be loaded as javascript code, so if contents are not valid javascript code it will fail.

Surround data with a global variable assignation or a function call:

    window.variable = "_DATA_"; // or
    functionName("_DATA_");

If _DATA_ are JSON format, then you don't need surround with quotes, otherwise you'll need to use "_DATA_" because without quotes it will not be valid javascript syntax.

Kerrikerrie