在不同的端口上运行 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