Many single-page applications that need to access a JSON data file in the same path for a simple HTML page will report cross-domain problems. Unable to get the local JSON file.

  1. Why do you run into cross-domain problems? Cross-domain, that is, browsers have a security mechanism called the same origin policy (CROS). Client scripts from different domains cannot read each other’s resources without explicit authorization. It ensures that scripts in one domain can only read and write to resources in that domain, and cannot access resources in other domains. Simple: Cross-domains are different sources, so to speak.

Many single-page applications that need to access a JSON data file in the same path for a simple HTML page will report cross-domain problems. Unable to get the local JSON file.

  1. Why do you run into cross-domain problems? Cross-domain, that is, browsers have a security mechanism called the same origin policy (CROS). Client scripts from different domains cannot read each other’s resources without explicit authorization. It ensures that scripts in one domain can only read and write to resources in that domain, and cannot access resources in other domains. Simple: Cross-domains are different sources, so to speak.

Domain: The protocol, domain name and port are the same and are considered to be the same domain.

But not all browsers have CROS policies; Firefox and Edge IE are allowed to cross domains.

  1. Why can’t you open the HTML page directly to access the JSON file of an ActiveVerePortsJS report

ActiveVerePorsJS designs report files with the suffix.rdlx-json, but it is also a JSON file in essence. It appears that the JSON file is accessed directly from the HTML page under the same path, which appears to be the same domain name and port. Access to ActiveVerePorsJS report files is essentially File protocol, while Chrome cross-source requests only support protocol schemes: HTTP, Data, Chrome, Chrome-Extension, HTTPS.

  1. How to solve
  2. Pure front-end approach: Adopt JSONP JSONP is an informal transport protocol designed to make it easier for clients to use data. Note the distinction between JSON and JSONP: JSON: is a data format. JSONP: is a data invocation method. The JSONP approach has some limitations: it only works for GET requests; When reading a local JSON file, the data in the JSON file is contained in a function name

Solution:

  1. Open the report file using Visual Studio Code and prefix it with var template=
  2. And change the suffix of the report file to.js
  3. Introducing the.js file in the
  4. viewer.open(template);

  1. If you deploy to IP or domain name, the deployment authorization will be detected. If you have the deployment authorization to directly deploy, if not, you need to apply for it on the website. Deploying to the server is equivalent to the same origin, which is not a cross-domain problem. Note that when deploying to the server, you register the MIME type with JSON 

    <staticContent>
    <mimeMap fileExtension=".rdlx-json" mimeType="application/json" />
</staticContent>

    </system.webServer>

    </configuration>