javascript - Request blocked by CORS policy when trying to embed Qlik objects

Question

I'm trying to embed Qlik object into my webpage.

I'm using the same code that worked with another project I have (that works) and only changed the object-ID's en app-ID. I get various CORS errors such as: Access to XMLHttpRequest at 'https://mycloud/api/v1/csrf-token' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-xsrf-token is not allowed by Access-Control-Allow-Headers in preflight response.

HTML links:

<link rel="stylesheet" href="https://username.eu.qlikcloud.com/resources/autogenerated/qlik-styles.css">
    <script type="text/javascript" src="https://username.eu.qlikcloud.com/resources/assets/external/requirejs/require.js"></script>

Jquery:

$( document ).ready(function() {
    console.log( "Qlik is ready!" );
});

connect();

async function connect() {
    const urlQlikServer = "my qlikcloud";
    const urlLoggedIn = "/api/v1/audits";//Use GET request to see if you are authenticated
    const urlLogin = "/login";
    const webIntegrationId = 'my ID';

    //Check to see if logged in
    return await fetch(`${urlQlikServer}${urlLoggedIn}`, {
        credentials: 'include',
        headers: {
            'Qlik-Web-Integration-ID':webIntegrationId
        }
    })
    .then(async function(response)
    {
        //check if user is authenticated; if not, redirect to login page
        if(response.status===401){
            const url = new URL(`${urlQlikServer}/login`);
            url.searchParams.append('returnto', 'page');
            url.searchParams.append('qlik-web-integration-id', webIntegrationId);
            window.location.href = url;
        }
        console.log("Authenticated")
    })
    .catch(function(error)
    {
        console.error(error);
    });
}

var config1 = {
    host: "my qlikcloud", //the address of your Qlik Engine Instance
    prefix: "/", //or the virtual proxy to be used. for example "/anonymous/"
    port: 443, //or the port to be used if different from the default port
    isSecure: true, //should be true if connecting over HTTPS
    webIntegrationId: 'my ID' //only needed in SaaS editions and QSEoK
};

require.config( {
    baseUrl: (config1.isSecure ? "https://" : "http://" ) + config1.host + (config1.port ? ":" + config1.port : "") + config1.prefix + "resources",
    webIntegrationId: config1.webIntegrationId
} );

require( ["js/qlik"], function ( qlik ) {

    qlik.on( "error", function ( error ) {
        $( '#popupText' ).append( error.message + "<br>" );
        $( '#popup' ).fadeIn( 1000 );
    } );
    $( "#closePopup" ).click( function () {
        $( '#popup' ).hide();
    } );

    //open apps -- inserted here --
    var app = qlik.openApp("My app-ID", config1);
    //get objects -- inserted here --

    //object
    app.getObject('batterylevel', 'JTpcAP');
    

    $("#ClearAll").click(function() {
        app.clearAll();
    });

} );

I edited some things like servername and such for this post but I thoroughly checked and there are no typos. I'm running on localhost:3000 and I whitelisted that on Qlik. Like I said exact code works on my other project and I don't know what's wrong

question from:https://stackoverflow.com/questions/65829043/request-blocked-by-cors-policy-when-trying-to-embed-qlik-objects

Answer 1

Waitting for answers