How Can I Resolve the Reported Cross-domain Error When the xmlHttpRequest Requests the URL of the CEC?

Symptom

The following error information is displayed:

Access to XMLHttpRequest at "requested js" from origin xx has been blocked by CROS policy: No 'Access-Control-Allow—Origin' header is present on the requested response;

Solution

This is a cross-domain error: The website of the integrator does not allow requests for resources that are not provided by the local domain due to security restrictions. You can use the reverse proxy of a load balancing application (such as Nginx).

Figure 1 Principles of address mapping on a load balancing application

When a third-party page uses JavaScript to invoke a service under the local domain name, the service is bypassed to the domain name of the CEC.

The CEC identifies the request only when it identifies service-cloud. Therefore, the request URL of the third-party page must contain service-cloud.

The following uses Nginx as an example to describe the overall configuration:

1. Add the first-layer service address to the nginx.conf file as follows:

   location /demo/ {
   	proxy_set_header Host $host;
   	set $Real $proxy_add_x_forwarded_for;
   	if ($Real ~ (\d+)\.(\d+)\.(\d+)\.(\d+)\,(.*)){
   		set $Real $1.$2.$3.$4;
   	}
   	proxy_set_header X-Real-IP $Real;
   	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   	
   	proxy_pass https://servicestage.besclouds.com/;
   }

   

   • demo is an example value. The integrator can replace the value based on requirements.
   • Replace servicestage.besclouds.com with the address provided by the CEC.

   location /service-cloud/ {
   	proxy_set_header X-Real-IP $remote_addr;
   	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   	
   	proxy_request_buffering off;
   	proxy_pass https://servicestage.besclouds.com/service-cloud;
   }

2. Use the following address to send a JavaScript request in the Developing an Integration Page. Replace location.protocol with the domain name of the integrator and the service name configured in the previous step, for example, demo.

   const $ContextPath = location.protocol/service-cloud
   let serviceUrl = $ContextPath+ "/webclient/chat_client/js/thirdPartyClient.js?"+"&t=" + timestamp;
   let thirdUserData = {};
   ......