带有正文的angularjs资源帖子答案

【问题标题】：angularjs resource post with body带有正文的angularjs资源帖子
【发布时间】：2016-05-28 23:54:56
【问题描述】：

我是 angularjs 的新手，我正在尝试用 body 来发布资源以存在 api 当我在邮递员上发送带有正文的帖子时，它可以正常登录并取回令牌

API 工作正常我怎么能在 angularjs 上做到这一点

这是我的代码这是api

[Route("v1/token")]
        [HttpPost]
        public IHttpActionResult Post(LoginViewModel viewModel)
        {}

我的资源工厂

app.factory('getToken', function ($resource, $q) {

        return function (email, password) {
            console.log(email);
            console.log(password);
            return $resource('http://localhost:9303/v1/token', {}, {
                login: {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/jsonp;'
                    },
                    body: {
                        Email: email,
                        Password: password
                    }
                }
            });

        }
    });

这是我的登录功能

loginService.login = function (username, password) {

        var deferred = $q.defer();

        if (username === 'erez' && password === 'pass') {
            var src = getToken('email','password').login(function (result) {
                console.log(result);
            });
            console.log(src);
            deferred.resolve(src);
        }
        else {
            deferred.reject({ message: 'Unauthorized user' });
        }

        return deferred.promise;

    }

我得到了那个错误

POST http://localhost:9303/v1/token (anonymous function) @ angular.js:11442r @ angular.js:11235g @ angular.js:10945(anonymous function) @ angular.js:15552m.$eval @ angular.js:16820m.$digest @ angular.js:16636m.$apply @ angular.js:16928(anonymous function) @ angular.js:24551n.event.dispatch @ jquery-2.2.0.min.js:3r.handle @ jquery-2.2.0.min.js:3
(index):1 XMLHttpRequest cannot load http://localhost:9303/v1/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:53647' is therefore not allowed access. The response had HTTP status code 500.

当我对 api 进行调试时，当我到达 api 时，viewModel 为空为什么它为空他没有得到我的身体

我尝试用参数替换 body 但相同

感谢帮助

【问题讨论】：

嗯，你的问题是这个“没有'Access-Control-Allow-Origin'标头存在......”。这是您的服务器拒绝请求，因为来自它不知道的位置。需要对服务器进行更改以允许来自其他来源的请求。你应该做一些关于它的阅读
那么它如何与具有相同标题的邮递员一起使用？
Chrome 打包应用可以拥有跨域权限。当您安装 Postman 时，它会提示您此应用将访问任何域。

标签： c# angularjs asp.net-web-api2

【解决方案1】：

我想分享我对这个问题的解决方案经过大量研究后，我发现当您尝试发布到 web api 时，您必须在同一个域中，这是典型的跨域问题

首先你需要在包管理控制台上安装

Install-Package Microsoft.AspNet.WebApi.Cors

如果你的 web.config 中有应该删除它

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE" />
  </customHeaders>
</httpProtocol

并将其添加到 WebApiconfig

config.EnableCors();

并且需要将此行添加到web api上的post方法中

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

希望对某人有所帮助问候

【讨论】：

【解决方案2】：

您正在请求从一个域到另一个域，例如从 www.xyz.com 到 www.abc.com。在您的情况下，您从 Origin 'localhost:53647' 请求 'localhost:9303/v1/token'。

出于调试目的，您可以在 google chrome 和其他浏览器上使用 Allow-Control-Allow-Origin 插件，否则您需要配置并允许 localhost:9303/ 接受来自其他域的请求。

【讨论】：

但是当我调试 post api 时它会捕获 post req 但 viewmodel 是空的
您需要调用登录函数才能将 viewModel 发送到您的 API。
请在您的代码中进行以下更改，然后您就可以... :)
return function () { return $resource('localhost:9303/v1/token', {}, { login: { method: 'POST', headers: { 'Content-Type': 'application/jsonp; ' } } }); //并更改调用此服务的位置 var src = getToken.login({Model Body here}).$promise().then(function(result){ console.log(result); });