Question

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

如果service和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);
        }

LoginService.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 
        }
    );
}

Answer 1

您需要在提供Web API的Project / Web应用上启用跨站点脚本。

您的UI / API使用者位于单独的项目/端口中，并且如果禁用了跨站点脚本（CORS），则API服务器不会将请求视为“ 相同来源请求”。

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

接下来，您需要使用[EnableCors]注释装饰控制器，例如我的网页位于localhost：8080，只需将其装饰为：

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

您还可以使用*通配符

允许任何网站访问您的API

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

您需要详细了解CORS。您还需要解决CORS的安全性问题。

在不同的端口上运行AngularUI和Asp.net WebApi

1 个答案: