Add API data sources in DataV-Board - DataV - Alibaba Cloud Documentation Center

To perform data aggregation, integrate third-party data, or address concerns such as high performance, security, log monitoring, and traffic shaping, you can publish business data as APIs and connect them to DataV-Board. This document guides you through adding API data sources in DataV-Board and explains related parameter configurations.

Prerequisites

Important

Ensure the API address is accessible to the DataV service: If deployed locally, the local API service should be reachable. If not, verify that the API address is publicly accessible.

The API data source you want to add must be prepared.
Note
HTTP/HTTPS protocol APIs are supported without specific requirements for return formats or data types. APIs can be provided by third parties or created based on business requirements. Creating APIs involves selecting data sources, designing, implementing, testing, and deploying them. For more information, consult the relevant R&D personnel.
A data dashboard should be created with the necessary widgets added. For more information, see Create a PC dashboard using a template, Widget canvas operations, and Configure widgets.

Scenarios

APIs may encounter cross-origin issues or require cookies to retrieve information. DataV-Board supports these scenarios through configuration items such as Server Proxy Request and Require Cookie. The specific operations are outlined below.

Cross-origin scenario	Cookie scenario	Support status
No cross-origin	No cookie required	Supported. No selection required.
No cross-origin	Cookie required	Supported. Select only Require Cookie.
Cross-origin	No cookie required	Supported. Select only Server Proxy Request.
Cross-origin	Cookie required	Not supported. Resolve the cross-origin issue first. For more information, see Cross-origin resource sharing.

Procedure

Access the DataV console.
Select the desired widget. In the widget configuration panel on the right side of the canvas, choose Data Source.
In the Set Data Source module, set the Data Source Type to API.

Enter the API parameters as required.

Parameter name	Description
Request Method	Select the request type of the API interface. GET and POST are supported. The default is GET. GET: Retrieve data from the server. POST: Submit data to the server for processing.
URL	Enter the request address of the API interface.
Headers	Request header parameters, which are metadata included in the HTTP request to transmit additional information.
Body	Request body parameters, which are the actual data transmitted in the request. This is required only for POST requests.
Server Proxy Request	Select this option if the URL address cannot be accessed due to cross-origin issues. Important In this case, the Require Cookie option is not effective.
Require Cookie	You can use cookies to control data permissions and ensure data security. In this case, the Server Proxy Request option cannot be selected. For specific scenarios and principles, see Cookie usage instructions.

Note

The Headers and Body parameters are presented in a key-value format. You can use the JSON editor to input data directly in JSON format. Be aware that once you switch to this mode, reverting to the visual editor is not possible. Proceed with caution.

Click View Data Return Results to inspect the data source's return results.

Cross-origin issues

What is cross-origin

A website http://exampleA.com attempting to access the data interface of http://exampleB.com will encounter data retrieval issues. In the browser, marked in red text (Chrome), this indicates a cross-origin problem.

XMLHttpRequest cannot load http://exampleB.com. The requested resource does not include the "Access-Control-Allow-Origin" header. Therefore, the origin site "http://exampleA.com" is not allowed to access it.

Note

Cross-origin refers to resource requests between pages that differ in protocol (HTTP), port (80), or domain name (example.com).

Solutions

To resolve cross-origin issues with the API address, use the following methods:

Opt for Server Proxy Request to directly address the issue.
Important
Ensure the API address is accessible to the DataV service: If deployed locally, the local API service should be reachable. If not, verify that the API address is publicly accessible.
Address the issue through cross-origin resource sharing.
Important
If the API requires cookie information, only Method 1 and Method 2 for cross-origin resource sharing are applicable. The cross-origin domain names to be supported must be explicitly specified in the response.

Cross-origin resource sharing

Cross-origin resource sharing (CORS) is a mechanism that allows browsers to request resources from different domains. It involves adding custom HTTP headers to the origin site to enable access by other websites. The configuration methods are as follows:

Method 1: To allow a specific website to use the origin site's interface data, include the following in the data server's returned header information.
```
Access-Control-Allow-Origin: http://exampleA.com
```
Method 2: For multiple websites to use the origin site's interface data, dynamically generate the header information using a program, such as the following PHP example.
```
<?php 
if (is_my_code($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
}
?>
```
Method 3: To allow all websites to use the origin site's interface data, use “*”.
```
Access-Control-Allow-Origin: *
```

Cookie usage instructions

Embedding a data dashboard into a business system via an iframe allows for data isolation using cookies. Specifically, upon user login, the business system generates a cookie containing the Session_Id with the user's login details. This cookie enables the retrieval of the corresponding user information.

When you select the Require Cookie (used when proxy is not selected and cookie needs to be retrieved) option for an API data source, DataV-Board will incorporate the cookie with the user's login details into the HTTPS request.
Important
- When Require Cookie is selected, Server Proxy Request cannot be chosen at the same time.
The server will then authenticate the request and, upon successful authentication, return the user's data. This ensures that after logging in, users can only access their data and not that of others.