powered by Jive Software

Openfire XMPP Client Connection via Ionic App

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: ");
                            user.getChatHistory().then(history => {
                                console.log("Chat History: ")
                            }).catch(e => console.log(e));
                        }).catch(e => console.log(e));
        ).catch(e => console.log(e));
    } catch(e) {



List of Friends:
[ 'test1.test@chat.company.io', 'test2.test@chat.company.io' ]

Chat History:
{ messages:
   [ { date: 2020-08-11T12:18:34.314Z,
       from: 'test1.test@chat.company.io',
       to: 'test6.test@chat.company.io',
       message: 'Hello! Received.',
       id: 'D255Q-132' }
] }
lastId: '1',
firstId: '1',
count: '1' }

However, when I run the script in an ionic app (using ionic serve on a Chrome browser) 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" />

Please help in figuring out what the issue might be.