在不同的端口上运行 Angular UI 和 Asp.net Web Api

Posted 2023-04-13

【中文标题】在不同的端口上运行 Angular UI 和 Asp.net Web Api

【英文标题】：Run AngularUI and Asp.net WebApi on different ports

【发布时间】：2018-12-29 21:51:37

【问题描述】：

我在不同的端口有 2 个单独的项目，一个是 asp.net web api，另一个是 angularjsUI，它使用 webapi 服务。当我从我的 Angular 项目中调用 webapi 服务时，该服务未命中。

如果服务和 angularUi 都在同一个项目中，那么没有问题，我可以使用该服务。

使用的技术： 与2015相比， Angularjs1.6, WebApi2

如何使不同端口的这两个独立项目之间的通信成功。 示例：

第 1 步：这些文件在我的 angularUI 项目中

LoginController.js

        $scope.RegisterClick=function(myregister) 
          var apiRoute = "http://localhost:51002/api/LoginApi";
          var registerdata = LoginService.post(apiRoute, registeruserdetails);
        

登录服务.js

        myqcapp.service("LoginService", function ($http)  
        this.post = function (apiRoute, Model)    
        var loginresult = $http(
                method: "post",
                url: apiRoute,
                dataType: 'json',
                headers: 
                    "Content-Type": "application/json; charset=utf-8"
                ,
                data: Model
            );
            return loginresult;
           
        );

第 2 步：在我的 WebApi 项目中

LoginApiController.cs

public class LoginApiController : ApiController

    [ResponseType(typeof(Register))]
    public IHttpActionResult Post(Register registercls)
    
        if (ModelState.IsValid)
        
            registerbs.Add(registercls);
            return CreatedAtRoute("DefaultApi", new  id = registercls.Userid , registercls);
        
        else
        
            return BadRequest(ModelState);
        
    

WebApiConfig.cs

public static void Register(HttpConfiguration config)
         
    // Web API routes
    config.MapHttpAttributeRoutes();
    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/Controller/id",
        defaults: new 
            Controller="LoginApi",
            id = RouteParameter.Optional 
        
    );

【问题讨论】：

您能否添加一个关于如何从 AngularJs 进行调用的示例以及 API 方法的示例

【参考方案1】：

您需要在为 Web API 提供服务的项目/网络应用上启用跨站点脚本。

您的 UI/API 使用者位于单独的项目/端口中，如果禁用跨站脚本 (CORS)，API 服务器不会将该请求视为“同源请求”。

您需要在 App_Start 文件夹中的 WebApiConfig 类的 Register(HttpConfiguration conf) 方法中调用 EnableCors()。如果默认情况下 WebApiConfig 不存在，那么您可能需要添加它。

接下来你需要用 [EnableCors] 注释来装饰你的控制器，假设我的网页在 localhost:8080，只需将其装饰为：

[EnableCors(origins: "http://localhost:8080", headers: "*", methods: "*")]
public class LoginApiController : ApiController
 
   ..... 

您还可以使用 * 通配符允许任何网站访问您的 API

[EnableCors(origins: "*", headers: "*", methods: "*")]

您需要了解有关CORS 的更多信息。您还需要解决 CORS 的安全问题。

【讨论】：

在我的服务端启用了 webapiconfig 中的 cors，并且还在 loginapicontroller 的属性中包含了这个 url(localhost:51002)。我只在我的angularui项目中调用这个服务url：“localhost:50718/api/LoginApi”但是客户端和服务之间没有通信？

@rajula 一定有某种异常？当您点击该 API 时，请检查您的浏览器控制台。

抛出此异常，无法加载localhost:50718/api/LoginApi：预检响应具有无效的 HTTP 状态代码 500。

@rajula 这意味着当它命中 API 时出现问题，在该 api 方法上放置一个调试器并再次检查

@rajula check this out，它解释了如何从 angularjs 端发送请求。您还两次提到了 json 格式。