Openfire XMPP Client Connection via Ionic App

Question

In order to test the client side connectivity with our Openfire XMPP server, the following test script (nodejs) was initially tested, which ran successfully.

async function connectX() {
    try {
        const keyPair = await XmppUser.generateKeys()
        XmppUser.connect(username, password, keyPairs).then(
           async user => {
                        user.getFriends().then(friends => {
                            console.log("List of Friends: ");
                            console.log(friends);
                            user.getChatHistory().then(history => {
                                console.log("Chat History: ")
                                console.log(history);
                                user.closeConnection();
                            }).catch(e => console.log(e));
                        }).catch(e => console.log(e));
            }
        ).catch(e => console.log(e));
    } catch(e) {
        console.log(e)
    }
}

connectX()

Output:

List of Friends:
[ '[email protected]', '[email protected]' ]

Chat History:
{ messages:
   [ { date: 2020-08-11T12:18:34.314Z,
       from: '[email protected]',
       to: '[email protected]',
       message: 'Hello! Received.',
       id: 'D255Q-132' }
] }
lastId: '1',
firstId: '1',
count: '1' }

However, when I run the script in an ionic angular app using the same ChatService class it leads me to the following CORS error.

Access to fetch at 'https://chat.company.io/.well-known/host-meta' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

For information, https://chat.company.io/.well-known/host-meta exists and has the following content:

<?xml version='1.0' encoding='utf-8'?>
<XRD xmlns='http://docs.oasis-open.org/ns/xri/xrd-1.0'>
  <Link rel="urn:xmpp:alt-connections:httppoll"
        href="https://chat.company.io:443" />
</XRD>

The backend infrastructure includes an Nginx server and the chat server runs behind it with the following open ports: 443, 7070, 5222, 5223.

Please help in figuring out what the issue might be.

Answer 1

Possible CORS issue, enable support for CORS in Openfire, server -> server settings -> http binding -> CORS section.