Cross-origin Resource Sharing

For some scenarios where self-built front-end projects are combined with HAP, since there are cross-domain issues, the front-end can't call the API of HAP system directly by default.

As shown below, the HTTP header parameters to allow cross-domain requests need to be set in the proxy tier configuration file (additional deployment is required if there is no proxy tier. View more details in Proxy Configuration).

An example configuration is shown below:

location / {

  add_header Access-Control-Allow-Origin 'Addresses that allow cross-domain access, such as https://a.domain.com. Separate with English commas if multiple';
  add_header Access-Control-Allow-Credentials 'true';
  add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
  add_header Access-Control-Allow-Headers 'Adjust it according to the Header parameters passed by the front-end, e.g. X-Requested-With, Authorizatioon';

  if ($request_method = 'OPTIONS') {
      return 204;
  }
  ......
}

caution

The above approach is not recommended if want to ensure the security of interface calls.

HAP has opened many standard APIs, such as [API Development Documentation] module for each application, and the interface calls are based on the authentication mode of AppKey and Sign.

If the front-end calls directly in the above way, it means that the AppKey, Sign and other information is made public. (Any user who can access the system can view the front-end code,) and with the values of these parameters, they can call the interface to get the data.

The recommended method is shown below:

The front-end of the self-built project does not directly call the API of HAP, but through the API provided by the server side of the self-built project. The front-end of the self-built project maintains an authentication with the server side (e.g., it needs login authentication) and finally interacts with the API of HAP through the server side. The related AppKey and Sign will be configured in the server side of the self-built project, which is not visible to the front-end at all, so as to ensure the security of the interface calls.