Web api not found after deployed in server

Question

I've deployed (with port 9021 and site name Production) an Angularjs Web API application on a test server, and when I hit the URL

http://localhost:9021/api/Item/GeAreas?P_Id=US99 

on the test server, I successfully get a response from the Web API.

This is the code for the api call:

 function getAreas(P_Id) { 
        $http({
            method: 'GET',
            url: 'http://ps-test.aars/api/Item/GetAreas', 
        // url: 'http://ps-test.aars/Production/api/Item/GetAreas', // error msg: the server responded with a status of 404 (Not Found)                                             /Production/api/Item/GetAreas?P_Id=US99 
            params: { P_Id: P_Id },
            headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' }
        }).then(function successCallback(response) {
            $scope.Areas = response.data;             
            }, function errorCallback(response) { }             
        });
    }

web.config:

 <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" resourceType="Unspecified" requireAccess="Script" preCondition="integratedMode,runtimeVersionv4.0" />
 </handlers>

When I hit the URL:

http://ps-test.aars/Production/Summary.html?P_Id=US99 

on my local system, I get an error:

Failed to load resource: the server responded with a status of 404 (Not Found) /api/Item/GetAreas?P_Id=US99

Not sure what the issue is.

Answer 1

Try to append port number to your url in the api call code like below

 url: 'http://ps-test.aars:9021/api/Item/GetArea'