Make calls to Salesforce APIs and third-party APIs from a Lightning web component. By default, you can’t make WebSocket connections or calls to third-party APIs from JavaScript code. To do so, add a remote site as a trusted URL (previously CSP Trusted Site).
The Lightning Component framework uses Content Security Policy (CSP), which is a W3C standard, to control the source of content that can be loaded on a page. The default CSP policy doesn’t allow API calls from JavaScript code. You change the policy, and the content of the CSP header, by adding the trusted URLs.
Use Lightning Data Service (LDS) to work with data and metadata for Salesforce records. Lightning Data Service is built on top of the public User Interface API, but it only supports a subset of the API. That subset covers many of the typical use cases for working with data. You can’t make calls to Salesforce APIs other than LDS from JavaScript code.
If LDS doesn’t support the object you are looking to use, or if you want to use another Salesforce API, write an Apex class.
Calling a Salesforce API or a third-party API typically requires authentication and authorization using OAuth 2.0. Some APIs also make their data available without authentication and authorization for demonstration purposes, such as with the Google APIs Explorer. We recommend that you check the third-party API documentation for usage details.
If you need to include authentication headers in your calls, use the Apex HttpRequest class to send the request. Providing your keys in JavaScript isn’t secure.
Note
To make a call to a third-party API, you must first add the third-party URL to the Trusted URLs page in Setup. If you’re fetching data from https://www.example.com/items/v1/brands, add the base URL https://www.example.com/ as a trusted URL.
Use the Fetch API to make third-party API calls. For example, you can make HTTP requests from your Lightning web component with the Fetch API and then parse JSON responses with the .json() method.
1async getItems() {
2 const response = await fetch("http://example.com/items.json");
3 const items = await response.json();
4}The miscRestApiCall component in the lwc-recipes repo sends a request to the Google Books API to perform a book search.
Tip
The Fetch API returns a promise, which is useful when you’re working with async requests. Use the fetch() method to make a request and fetch a resource. The catch() method is called only when the request fails entirely, such as when the user is offline, or when the request times out. To handle a 4XX or 5XX error, check the response.status property using then() or within the try block.
1async getItems() {
2 try {
3 const response = await fetch("http://example.com/items.json");
4 if (!response.ok) {
5 throw Error(response);
6 }
7 const myItems = await response.json();
8 } catch (error) {
9 console.error("There's a problem with your fetch operation:", error);
10 } finally {
11 // do something regardless of whether the operation was successful
12 }
13}For more information, see MDN Web Docs: Using the Fetch API. Alternatively, you might also find third-party web components (beta) or third-party JavaScript libraries that match your requirements.
Although you can call a third-party API through a trusted URL, you can’t load JavaScript resources from a third-party site, even from a trusted URL. To use a JavaScript library from a third-party site, add it to a static resource, and then add the static resource to your component. After the library is loaded from the static resource, you can use it as normal.
Important
See Also
j