Troubleshooting CORS issues in Visualize.js

Browsers gradually improve their security and CORS requests are not an exception. visualize.js by its nature most likely will make CORS requests. So there are certain rules which visualize.js app should follow to successfully make CORS requests.

What is CORS request?

It's better to read about the definition of the CORS on developer.mozilla.org: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

In short, if your visualize.js-based app is hosted on a https://some.host.com and your JRS instance is hosted on https://jrs.instance.com then any requests from visualize.js app using XMLHTTPRequest (XHR) or fetch will be considered to be Cross Origin and CORS rules will apply to such requests.

The definition of the Origin or Same Origin could be found here: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#definition_of_an_origin

NOTE: some browsers have different rules about when request is considered to be a Cross Origin. For example in IE (and probably even in Chromium-based Edge) port is not counted when origin policy is calculated (read here)

Why understanding CORS is important for visualize.js?

If visualize.js-based app and JasperReports Server instance are not configured properly to use CORS the customers might encounter different strange errors which are not obvious to match to wrong CORS config.

How to configure CORS in visualize.js application?

Configure JasperReports Server instance

Read this community article

Tips:

• Read the most recent Configuring CSRF Protection
• Use the latest JRS version when possible

Configure visualize.js app

The right way to configure the visualize.js app to make it work with CORS is to:

1. if you use a domain name for your hosted visualize.js application then ensure that HTTPS is used for both visualize.js host (your application) and for JRS host, because otherwise, Browser will not send cookies back to the JRS instance
2. if you use an IP address for both visualize.js app and JRS instance it might be not necessary to use HTTPS (depends on browser brand and version). This option could be used for the development/testing environment only.

Troubleshoot CORS issues

• Symptom #1: all XHR requests from the visualize.js app do not work and the following error is observed:

  	Access to XMLHttpRequest at ’https://somehost.com’ from origin ’https://someorigin.com’ 
  	has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ 
  	No 'Access-Control-Allow-Origin' header is present on the requested resource
  

  Solution: check domainWhitelist setup. It looks like the JRS server is not aware of your visualize.js app host.

• Symptom #2: some XHR requests from visualize.js app do not work, while others work well. Solution: First, check the network tab of your browser and inspect request and response headers. If in request header there is no Cookie: JSESSIONID=XXXXXXXXXX header present this means that there are some issues with CORS set up. Let's say if your visualize.js app is accessed through the domain name - most likely the solution is to enable HTTPS for both visualize.js app host and for JRS instance host. If you do not want to use HTTPS then it might help to access both the visualize.js app and JRS instance through an IP address instead of a domain name (it might or might not work for some browsers). Also, if you use any custom request headers like pp or Authorization, you need to allow them explicitly: see CORS error in JasperReports Server 7.8 (and later).

• Symptom #3: when visualize.js app is running the browser pops up a dialog with login/password form. After this visualize.js app works only partially or does not work at all. The solution is the same as for Symptom #2

• Symptom #4: all XHR requests from visualize.js app do not work even if HTTPS protocol is used to communicate between the visualize.js app and JRS and your visualize.js app is executed in an iframe (an example is jsfiddle samples like here: https://tibcosoftware.github.io/). Solution: currently this is a Safari-specific thing called Intelligent Tracking Prevention, but eventually all browsers will implement this feature. Namely, the issue is that if your visualize.js application is executed inside an iframe - the browser simply will not set server cookies at all. In JRS versions <= 7.9.0 there is no workaround at the moment except moving visualize.js out of an iframe.