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

Question

我在不同的端口有 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 
        }
    );
}

Answer 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 的安全问题。