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

Posted

技术标签:

【中文标题】在不同的端口上运行 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 格式。

以上是关于在不同的端口上运行 Angular UI 和 Asp.net Web Api的主要内容,如果未能解决你的问题,请参考以下文章

在不同端口的同一个 tomcat 上部署 Angular 5 和 Spring Boot 应用程序

如何将 REST 与 Node.js 和 AngularJS 一起使用在不同的端口上?

如何在同一个端口上运行 Node Express 服务器和 Angular?

在同一个端口上运行 Angular 和 ASP.NET Web API

如何在同一端口 4200 上运行 angular 4 app 和 nodejs api 用于生产和开发?

在具有不同端口的单个 EC2 上运行两个不同的 Web 应用程序