How do I use a remote web service

Most remote web service allow their APIs to be accessed from server on a different origin (domain) than their own by enabling Cross-Origin Resource Sharing (CORS). You can read more about CORS here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

However if this is not the case for the web service your application is using, you can use the SDK http proxy. The proxy ships with your Deskpro installation, meaning it is hosted on the same domain as your Deskpro installation.

The http proxy supports GET, POST, PUT, DELETE requests:

GET

    // obtain a reference to the API Client from the Application Client
    const { restApi } = this.props.dpapp;

    // issue a GET request
    restApi.fetchProxy(
      `https://us16.api.mailchimp.com/3.0/search-members?query=[e-mail]`,
      {
        method: 'GET',
        headers: {
          'Accept': 'application/json' ,
          'X-Proxy-SignWith': 'basic_auth anystring:{{apiKey}}'
        }
      }).then(({body, headers}) => {
        console.log('response: ', body, headers)
    });

DELETE

    // obtain a reference to the API Client from the Application Client
    const { restApi } = this.props.dpapp;

    // issue a DELETE request
    restApi.fetchProxy(    `https://us16.api.mailchimp.com/3.0/lists/57afe96172/members/20dbbf20d91106a9377bb671ba83f381`,
    {
      method: 'DELETE',
      headers: {
        'Accept': 'application/json' ,
        'X-Proxy-SignWith': 'basic_auth anystring:{{apiKey}}'
      }
    }).then(({body, headers}) => {
      console.log('response: ', body, headers)
    });

for POST and PUT requests you need to specify the Content-Length header:

POST

  // obtain a reference to the API Client from the Application Client
  const { restApi } = this.props.dpapp;

  // create the request body
  const body = {
    globalId: 'ticket-44',
    relationship: 'linked with',
    object: {
      url: 'http://localhost/agent/#app.tickets,inbox:agent,t.o:44',
      title: 'DeskPRO #44',
      summary: 'My linked ticket'
    }
  };

  // issue a POST request 
  restApi.fetchProxy(
`http://localhost:8090/jira/rest/api/latest/issue/TST-1/remotelink`,
  {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json' ,
        'Accept': 'application/json' ,
        'Content-Length': JSON.stringify(body).length        
     },
     body: JSON.stringify(body)     
  }).then(({body, headers}) => {
    console.log('response: ', body, headers)
});

PUT

  // obtain a reference to the API Client from the Application Client
  const { restApi } = this.props.dpapp;

  // create the request body
  const body = {
    globalId: 'ticket-44',
    relationship: 'linked with',
    object: {
      url: 'http://localhost/agent/#app.tickets,inbox:agent,t.o:44',
      title: 'DeskPRO #44',
      summary: 'My linked ticket'
    }
  };

// issue a PUT request
restApi.fetchProxy(
`http://localhost:8090/jira/rest/api/latest/issue/TST-1/remotelink/100`,
{
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json' ,
    'Accept': 'application/json' ,
    'Content-Length': JSON.stringify(body).length
  },
  body: JSON.stringify(body)
}).then(({body, headers}) => {
  console.log('response: ', body, headers)
});