Add API data sources in DataV-Board-DataV(DataV)-阿里云帮助中心

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 for authentication. DataV-Board handles these scenarios through the Server Proxy Request and Require Cookie options.

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	The request method for the API. GET and POST are supported. Default: GET. GET: Retrieves data from the server. POST: Submits data to the server for processing. For detailed explanations of these two request methods, see Common request methods.
URL	The request URL of the API.
Headers	Metadata included in the HTTP request to transmit additional information.
Body	The data payload transmitted in the request. Required only for POST requests.
Server Proxy Request	Enable this option if the API URL cannot be accessed due to cross-origin restrictions. Important In this case, the Require Cookie option is not effective.
Require Cookie	Enable this option to pass cookies for data permission control and security. When enabled, Server Proxy Request cannot be selected. For specific scenarios and principles, see Cookie usage instructions.

Note

The Headers and Body parameters use a key-value format. You can use the JSON editor to input data directly in JSON format. After switching to the JSON editor, you cannot revert to the visual editor.

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

Cross-origin issues

What is cross-origin

When a website at http://exampleA.com tries to access a data interface at http://exampleB.com, the browser blocks the request. In Chrome, a red error message 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 requests between pages that differ in protocol, port, or domain name.

Solutions

You can resolve cross-origin issues with the API address by using one of the following methods:

Enable Server Proxy Request to resolve the issue directly.

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.
Configure cross-origin resource sharing (CORS) on your server.

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) allows browsers to request resources from different domains by adding custom HTTP headers to the server response. Configure CORS by using one of the following methods:

Method 1: To allow a specific website to access the origin site's data, add the following response header on the data server.
```
Access-Control-Allow-Origin: http://exampleA.com
```
Method 2: To allow multiple websites to access the origin site's data, dynamically generate the header using a program. The following is a 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 access the origin site's data, use ”*”.
```
Access-Control-Allow-Origin: *
```

Cookie usage instructions

When a data dashboard is embedded into a business system via an iframe, you can use cookies for data isolation. Upon user login, the business system generates a cookie containing the Session_Id with the user's login details, which is used to retrieve 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 includes the cookie with the user's login details in the HTTPS request.
Important
- When Require Cookie is selected, Server Proxy Request cannot be chosen at the same time.
The server authenticates the request and, upon success, returns only the authenticated user's data. This ensures that users can access only their own data after logging in.