Calling Web API Service in a Cross Domain Using jQuery AJAX

Back to: ASP.NET Web API Tutorial

Calling Web API Service in a Cross-Domain Using jQuery AJAX

Cross-domain requests, or making API calls from a web page to a different domain, can be a challenge due to browser security restrictions. In this article, we’ll explore how to call a Web API service from a different domain using jQuery AJAX and handle Cross-Origin Resource Sharing (CORS) issues. We’ll provide code examples to demonstrate the process.

Understanding CORS

Cross-Origin Resource Sharing (CORS) is a security feature implemented by web browsers that allows or restricts web pages from making requests to a different domain. To enable cross-domain requests, the server hosting the API must include specific HTTP headers in its responses.

Prerequisites

  1. A Web API service hosted on a different domain.
  2. A web page or application where you want to make the cross-domain API call.

jQuery AJAX for Cross-Domain Requests

Here’s how you can make a cross-domain API request using jQuery AJAX:

<!DOCTYPE html>
<html>
<head>
    <title>Cross-Domain API Request</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="fetchData">Fetch Data</button>
    <div id="result"></div>

    <script>
        $(document).ready(function () {
            $("#fetchData").click(function () {
                $.ajax({
                    url: 'https://api.example.com/data', // Replace with your API endpoint
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        // Handle the API response data
                        $("#result").html(JSON.stringify(data));
                    },
                    error: function (error) {
                        // Handle any errors
                        console.error('Error:', error);
                    }
                });
            });
        });
    </script>
</body>
</html>

In this example:

  • We include the jQuery library using <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>.
  • We define a button (#fetchData) that triggers the API request.
  • When the button is clicked, a jQuery AJAX request is made to the API endpoint (url).
  • The dataType is set to 'json' since we expect JSON data from the API.
  • In the success callback, we handle the API response data and display it in a div with the id #result.
  • In the error callback, we handle any errors that may occur during the request.

Handling CORS on the Server

To enable cross-domain requests on the server-side, you need to configure your API to include the appropriate CORS headers. The specific configuration depends on the server technology you’re using (e.g., ASP.NET, Node.js, PHP).

Ensure that your API includes the following CORS headers in its responses:

  • Access-Control-Allow-Origin: Specify the allowed domains that can access your API. For example, you can set it to * to allow all domains, or a specific domain like 'https://yourwebsite.com'.
  • Access-Control-Allow-Methods: Define the HTTP methods allowed for cross-origin requests (e.g., GET, POST, PUT, DELETE).
  • Access-Control-Allow-Headers: List the HTTP headers that are allowed in cross-origin requests.

Consult your server-side technology’s documentation for specific instructions on configuring CORS headers.

Conclusion

Calling a Web API service from a different domain using jQuery AJAX is a common task in web development. By understanding CORS and configuring your server to handle cross-domain requests, you can ensure secure and seamless communication between your web application and external APIs.