How to read value from opc ua nodes and display these values inside a customized widget?

[yumao.liu]

What product/components do you use and which version/fix level are you on?

Cumulocity IoT

Is your question related to the free trail, or to a production (customer) instance?

a production (customer) instance

What are you trying to achieve? Please describe in detail.

I want to read values from opc ua nodes and display these values in my customized widget. I applied the method described in this link"OPC UA - Cumulocity IoT Guides". I refered to this paragraph.

I wrote the following code to send the message to gateway and wish to get the value of node with node id 8.

readNodeValvue() {
   let formData = `{
       "deviceId" : "replaceID",
       "c8y_ua_command_ReadValue": {
           "nodes": [8],
           "timestampsToReturn": "Neither"
       },
       "description":"read value"
   }`;
   formData = formData.replace("replaceID", this.deviceID)
   let formDataJSON = JSON.parse(formData)
   this.http.post(this.url,formDataJSON, this.options).subscribe(res =>{console.log(res);});
   alert(this.message);
   }

I also defined a button to send the message. Here is the code for button.

  <div class="container">
    <label class="u-label">Read value of node: </label>
    <button class="button" [disabled]="canClick" (click)="readNodeValvue()">Read</button></div>

After running my localhost, I pressed the button for node value reading. I got following errors.

Do you get any error messages? Please provide a full error message screenshot and log file.

Have you installed all the latest fixes of the products and systems you are using?

Yes

[Christian_Guether1 (Christian Guether)]

You are running your code on localhost, but you have probably hardcoded the URL bulut-dik-2021.cumulocity.com inside your code. This results in the shown CORS issue as your URL isn’t the same origin as localhost.

Instead of building the XMLHttpRequest yourself, you should use the @c8y/client. The c8y client already comes with the necessary APIs. There isn’t any need to implement them yourself. For your specific use case, you can use the OperationService to create and send the required operation. The client takes care of routing the request to respective Cumulocity instance.

[Robert_Neale]

Could setting CORS in Application settings in Administration help?

[yumao.liu]

Thank you very much, Mr. Guether. I will try to learn the method you mentioned and try to implement it to my application.

[yumao.liu]

Thank you very much, Mr. Neale. I will also try to set it in Administration.