We can use JavaScript to make client-side calls to a third-party website, provided the site is listed as CSP. It's always recommended to use the server-side Apex to make HTTP calls; however, with CSP configured in Salesforce you can make client-side calls. CSP ensures security against various web vulnerabilities.

The following example shows how can we use the JavaScript XMLHttpRequest (https://developer.mozilla.Org/en-US/docs/Web/API/XMLHttpRequest) to make GET requests. Note you can use this approach to make POST as well as PUT requests to any API that's HTTPS and CSP-protected.

In this example, we are making an API call to a public API that gives us the latest currency rates against EUR. You can read about the API at https://exchangeratesapi.io/.

We will be working against a simple GET request, as shown in the following Postman screenshot:

The Lightning Component shows how to use the XMLHttpRequest object in the Lightning Component. Observe we use $A.getCallback() to asynchronously execute this.

The important step here is to understand that you will need to create a CSP setting in Salesforce.

To create a CSP setting, the navigation path in the setup menu is Setup | Security| CSP Trusted Sites. This is shown in the following screenshot:

The following screenshot shows the values you will need to enter into the CSP Trusted Site record to connect to ExchangeRateAPI:

The component markup is as follows:

<aura:component>
   <aura:attribute name="exchangeRateData" type="List" default="[]"/>
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <div class="slds-box slds-align_absolute-center" style="height: 5rem;">
      Base Currency for Result is in <b> EUR </b>
   </div>
   <br/>
   <div>
      <table class="slds-table slds-table_bordered slds-table_cell-buffer">
         <thead>
            <tr class="slds-text-title_caps">
               <th scope="col">
                  <div class="slds-truncate" title="Currency">
                     <b>Currency</b>
                  </div>
               </th>
               <th scope="col">
                  <div class="slds-truncate" title="Rate">
                     <b>Rate</b>
                  </div>
               </th>
            </tr>
         </thead>
         <tbody>
            <aura:iteration items="{!v.exchangeRateData}" var="item">
               <tr>
                  <th scope="row" data-label="Currency">
                     <div class="slds-truncate" title="Currency">{!item.currency}</div>
                  </th>
                  <td data-label="Rate">
                     <div class="slds-truncate" title="Rate">{!item.rate}</div>
                  </td>
               </tr>
            </aura:iteration>
         </tbody>
      </table>
   </div>
</aura:component>

The controller code is as shown in the following code snippet:

({
    doInit : function(component, event, helper) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = $A.getCallback(function() {
            if (this.readyState === 4) { // DONE
                if (xhttp.status === 200) {
                    var response = JSON.parse(xhttp.responseText);
                    var data = [];
                    for (var value in response.rates) {
                        var dataItem = {};
                        dataItem.currency = value;
                        dataItem.rate = response.rates[value];
                        data.push(dataItem);
                    }
                    component.set("v.exchangeRateData",data);
                }
                else {
                    console.log('Request failed. Returned status of ' + xhttp.status);
                }
            }
        });
        xhttp.open("GET", "https://exchangeratesapi.io/api/latest");
        xhttp.send(null);
    }
})

The component will render the table with the results shown in the following screenshot: