DataV:How to Configure cross-domain Data

Background information

User A wants to create a visualization application to display data to the customer. If you set Data Source Type to API, the following two conditions may occur:

• If the API is on a remote server, you can select Server Proxy Request (select this check box if the cross-domain cannot be accessed). If you select Server Proxy Request (This option is available if the cross-domain is inaccessible), the DataV backend server initiates a request to the API. The timeout period is 10 seconds and cannot be modified.

• If the API is a local API, do not select Server Proxy Request (select this check box when the cross-domain cannot be accessed), and you must configure cross-domain data for the API. If you do not select Server Proxy Request (this can be selected if the cross-domain is inaccessible), the local browser accesses the API, and the timeout period is determined by the browser.

What is cross-domain data configuration?

User A contains data from its own website as well as user B's website. The data on your own website can be accessed through interfaces like http://userA.com/page1. User B provides http://userB.com/page2 data interface, but when user A sends a Javascript ajax request to user B's website, it will not get the data from the userB.com.

Open the browser and you can see the following text marked in red (Chrome). That means we have a cross-domain problem.

XMLHttpRequest failed to load http://userB.com/page2. The requested resource does not have a "Access-Control-Allow-Origin" header. Therefore, the source site "http://userA.com/page1 /" is not allowed to access. 

cross-domain problem causes

Since each website contains various user interfaces, order interfaces, and article interfaces, this means that everyone can put the data returned by these interfaces into their own website, even in real time. Therefore, the browser uses the same-origin policy to restrict scripts from one source site from obtaining resources from other source sites.

Solution

• A.x.com and B.x.com cross-domain

  If the subdomains of the two sites are different, there are cross-domain issues. Examples are http://56.alibaba.com/ and http://trade.alibaba.com/.

  Add the following code to the page to declare the page as a higher-level domain.

  <script>
    document.domain = "x.com";
  </script>

• JSONP

  Although JSONP is the most classic, efficient, and browser-compatible solution, DataV does not support this method because it has a very high cross-site scripting risk. You can consult the relevant information for specific information.

• Cross-origin resource sharing (CORS)

  Note

  cross-origin resource sharing: Cross Origin Resource Sharing, referred to as CORS. Already compatible with most newer browsers.

  • Basic principle: Add a custom HTTP header to source site B (local API) so that other websites can access its resources.

  • Procedure

    • If the interface data of source site B needs to be used by a website, add the following content to the header information returned by the data server.

      Access-Control-Allow-Origin: http://userA.com

    • If the interface data of the source site B needs to be used by multiple websites, a program must be used to dynamically generate the header information. Take the PHP code as an example.

      <?php 
      if (is_my_code($_SERVER['HTTP_ORIGIN'])) {
      header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
      }
      ?>

    • If the interface data of source site B needs to be used by the website used, "*" can be used.

      Access-Control-Allow-Origin: *

  • Add Cookie Action: By default, CORS does not contain cookie information. If you want to add cookies, follow these steps.

    1. Add withCredentials parameters, using jQuery as an example.

       $.ajax({
        url: "http://userB.com/page2",
        xhrFields: {
          withCredentials: true
        }
       });

    2. Set the server to allow the use of header credentials, but not wildcard "*", using PHP as an example.

       <?php 
       if (is_my_code($_SERVER['HTTP_ORIGIN'])) {
       header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); // Disallow "*"
       header("Access-Control-Allow-Credentials:true");
       }
       ?>

       For more information, see HTTP RAM (CORS).