路由到api工作错误

Route to api work wrong

本文关键字：错误 工作 api 路由      更新时间：2023-09-26

当我从http://localhost:5086/它发送到api/FileBrowser效果很好，但当我尝试从http://localhost:5086/Home/Index到api，到url添加的控制器Home，并请求发送到/Home/api/FileBrowser

请帮帮我，我做错了什么？

具有2种方法的ApiController

public FileBrowserModel Get()
    {
        var result = new FileBrowserModel();
        List<string> drives = new List<string>();
        foreach (var drive in DriveInfo.GetDrives())
        {
            var path = drive.Name;
            FileManagerCounter fmCounter = new FileManagerCounter(path);
            result.CountTo10Mb += fmCounter.CountTo10Mb;
            result.Countfrom10To50Mb += fmCounter.Countfrom10To50Mb;
            result.CountFrom100Mb += fmCounter.CountFrom100Mb;
            drives.Add(path);
        }
        result.SubDirectories = new List<string>(drives);
        return result;
    }
    [CacheOutput(ServerTimeSpan = 150)]
    [System.Web.Http.HttpGet]
    public FileBrowserModel Get(string path)
    {
        var result = new FileBrowserModel();
        try
        {
            try
            {
                result.ParentPath  = Directory.GetParent(path).FullName;
            }
            catch (Exception)
            {
            }
            var files = Directory.GetFiles(path).ToList();
            result.Files = new List<string>(files);
            result.CurrentPath = path;
            FileManagerCounter fmCounter = new FileManagerCounter(path);
            result.CountTo10Mb = fmCounter.CountTo10Mb;
            result.Countfrom10To50Mb = fmCounter.Countfrom10To50Mb;
            result.CountFrom100Mb = fmCounter.CountFrom100Mb;
            var subDirectories = Directory.GetDirectories(path).ToList();
            result.SubDirectories = new List<string>(subDirectories);
        }
        catch (Exception ex)
        {
            throw new HttpResponseException(HttpStatusCode.InternalServerError);
        }
        return result;
    }

js文件

angular.module("FileBrowserApp", [])
.controller("fileBrowserController", function($scope, $http) {
    $scope.getFileBrowsing = function (path) {
        $scope.isLoading = true;
        if (path != null) {
            $http({
                url: "api/FileBrowser?path=" + encodeURIComponent(path),
                method: "GET"
            }).success(function (data) {
                $scope.fileBrowserModel = data;
                $scope.isLoading = false;
            });
        } else {
            $http({
                url: "api/FileBrowser",
                method: "GET"
            }).success(function (data) {
                $scope.fileBrowserModel = data;
                $scope.isLoading = false;
            });
        }
    };
    $scope.getFileBrowsing();
});

路由

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        // Web API routes
        config.MapHttpAttributeRoutes();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{path}",
            defaults: new { path = RouteParameter.Optional }
        );
    }
}
public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

如果您确信您的Web API层始终存在于根域之上一层，那么您可以将ajax调用中的URL更改为：

url: "/api/..."

无论站点的结构如何，这都会调用相对于根域的api。

EDIT：War10ck的答案是简单的解决方案。

下面是一个替代解决方案，可以正确构建相对url

问题是，您将url值硬编码为"api/FileBrowser"。因此，根据当前页面，该值将发生变化。如果你在主页上，它将是Home/api/FileBrowser。

你应该做的是建立正确的相对url。由于您使用的是asp.net mvc页面，您可以使用Url.Action helper方法来构建正确的相对Url。您可以在剃刀视图中生成应用程序路由的值，并将其传递给角度控制器/数据服务并使用。

所以在你看来，

<script>
    var myApp = myApp || {};
    myApp.Urls = myApp.Urls || {};
    myApp.Urls.baseUrl = '@Url.Content("~")';       
</script>
<script src="~/Scripts/AngularControllerForPage.js"></script>
<script>
    var a = angular.module("FileBrowserApp").value("appSettings", myApp);
</script>

在你的角度控制器中，你可以访问这个appSettings。

var app = angular.module("FileBrowserApp", []);
var ctrl = function (appSettings) {
    var vm = this;
    vm.baseUrl = appSettings.Urls.baseUrl;
    //build other urls using the base url now
    var fileBrowserUrl= vm.baseUrl + "api/FileBrowser";
    alert(fileBrowserUrl);
    //You can use this variable value for your http call now
    $http({
            url: fileBrowserUrl+ "?path=" + encodeURIComponent(path),
            method: "GET"
        }).success(function (data) {
            $scope.fileBrowserModel = data;
            $scope.isLoading = false;
        });
};
app.controller("fileBrowserController", ctrl)

您可以并且应该在您的数据服务和指令等中访问它，并使用它来构建正确的url。

您还可以考虑将http调用从角度控制器转移到数据服务。

相关文章：