Qlik Community

Ask a Question

Integration, Extension & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
LINKEDIN LIVE: Democratizing data to enhance customer-centricity. JULY 29TH REGISTER TODAY
cancel
Showing results for 
Search instead for 
Did you mean: 
vegard_bakke
Partner
Partner

My 'define(["text!./main.css", "text!./template.html")' fails after upgrade to Nov 2019

Hi all!

 

We just updated from Qlik Sense from Nov 2018 to Nov 2019. And our extensions in our webapp (external mashup) failed when loading their CSS and HTML files.

 

The extension code line:

define(["qlik", "text!./main.css", "text!./template.html"], ...

Previously loaded:

  • /extensions/tooltip/main.css
  • /extensions/tooltip/template.html

 

Now they load:

  • /extensions/tooltip/main.css.js
  • /extensions/tooltip/template.html.js

 

Obviously I've missed something that's changed last year.  But can anyone help pinpoint what the new way is?

 

Best regards,
Vegard

 

Labels (3)
1 Solution

Accepted Solutions
vegard_bakke
Partner
Partner
Author

Is this for the `text!` entries only?

The text library of requirejs, distrusts cross-site xhrs, unless they end in '.js'. Therefore is adds the '.js'. (Don't ask me why this is a good idea.)

 

Defining useXhr, require loads the correct  url, but it does not include cookies. (Your credentials, and most importantly: your Qlik session cookie is dropped.)

Therefore you get unauthorized on the request. 

 

So in addition to `useXhr`, you need to define `createXhr`. 


This is what we used one place:

 config: {  
        text: {  
          useXhr: function (url, protocol, hostname, port) {  
            // enable xhr load for all text resources  
            return true;  
          },  
          createXhr: function () {  
            // use withCredentials flag to prevent authentication errors  
            var xhr = new XMLHttpRequest();  
            xhr.withCredentials = true;  
            return xhr;  
          },  
        },  
      }  
 }  

 

Hope this helps,

View solution in original post

8 Replies
aaz
Employee
Employee

Hi @vegard_bakke ,

There are no, (afaik), known issues between those 2 releases, one of my colleagues pointed that it may be a cross-domain issue. Can you post the console error, if there's any?

 

/aiham

vegard_bakke
Partner
Partner
Author

Thank you for your tip! CORS could definitely break the require load.

But the only CORS problem I get is related to /api/v1/csrf-token.

We have two sites. The mashup site: test.feature.company.com,
and Qlik Sense: test.qlik.company.com.

The requests have:

   Origin: test.feature.company.com

And the responses have:

   Access-Control-Allow-Origin: test.feature.company.com

 

The console log is:

Text and CSS load with require.png

vegard_bakke
Partner
Partner
Author

We are overriding useXhr (legacy from v 3.2).  May things have change regarding this?

 

Our require config:

config: {
   text: {
      useXhr: function() {
         return true;
      }
   }
}

 

aaz
Employee
Employee

Hi again,

The console says : `No 'Access-control-allow-origin' header is present` so you probably need to add extra response header in QMC > Virtual proxies > Edit Virtual Proxy > Advanced > Additional response headers -- see  here -> https://support.qlik.com/articles/000044178

But I don't think Nov 2019 release will allow you to use `*` as value, you will need to specifically add the domain:
`Allow-Control-Access-Origin:test.feature.company.com`

The `/api/v1/csrf-token` call is only needed by Qlik Sense Cloud deployments - it shouldn't be a problem, you can ignore it.

 

I hope this helps,

vegard_bakke
Partner
Partner
Author

True, but the error message about the "No 'Access-control-allow-origin' header is present", is regarding the  /api/v1/csrf-token call.

(See https://community.qlik.com/t5/Qlik-Sense-Integration-Extensions-APIs/mashup-CSRF-access-error-after-...)

 

The other requests already have Allow-Control-Access-Origin:test.feature.company.com.

(You are right about the '*'. But Nov 2018 did not allow Allow-Control-Access-Origin: *, either, as it had started using  'Access-Control-Allow-Credentials: true')

 

I tried:

define(["css!./main.css", "html!./template.html")

 This actually loads the CSS, but when Qlik attempts loading the html file, it tries: 'template_unnormalized4'.

 

Vegard

romankoba
Contributor II
Contributor II

Hi Vegard,

Did you find the solution for the issue? 

When I override useXhr  - I got unauthorized exception, when I don't - it tries to load some.html.js as you've mentioned.

 

Regards, 

Roman

vegard_bakke
Partner
Partner
Author

Is this for the `text!` entries only?

The text library of requirejs, distrusts cross-site xhrs, unless they end in '.js'. Therefore is adds the '.js'. (Don't ask me why this is a good idea.)

 

Defining useXhr, require loads the correct  url, but it does not include cookies. (Your credentials, and most importantly: your Qlik session cookie is dropped.)

Therefore you get unauthorized on the request. 

 

So in addition to `useXhr`, you need to define `createXhr`. 


This is what we used one place:

 config: {  
        text: {  
          useXhr: function (url, protocol, hostname, port) {  
            // enable xhr load for all text resources  
            return true;  
          },  
          createXhr: function () {  
            // use withCredentials flag to prevent authentication errors  
            var xhr = new XMLHttpRequest();  
            xhr.withCredentials = true;  
            return xhr;  
          },  
        },  
      }  
 }  

 

Hope this helps,

View solution in original post

romankoba
Contributor II
Contributor II

that helped, thank you a lot!

 

Roman