Question

我对angularjs很新。

我正在尝试进行http调用并将对象发布到仅接受json的api。

'use strict';

// Declare app level module which depends on views, and components
var app = angular.module('ngShow', ['ngRoute','ngResource']);

app.
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/login', {templateUrl: 'partials/login.html' });
  $routeProvider.otherwise({redirectTo: '/login'});

}]);

app.
config(['$httpProvider', function($httpProvider) {
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
        $httpProvider.defaults.headers.common['Access-Control-Max-Age'] = '1728000';
        $httpProvider.defaults.headers.common['Accept'] = 'application/json, text/javascript';
        $httpProvider.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';
        $httpProvider.defaults.useXDomain = true;
}]);

但似乎无法从请求标头中工作。

Request Headers 15:31:10.000
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0
Pragma: no-cache
Origin: http://localhost:63342
Host:   localhost:8080
DNT:    1
Connection: keep-alive
Cache-Control:  no-cache
Access-Control-Request-Method:  POST
Access-Control-Request-Headers: access-control-max-age
Accept-Language:    en-US,en;q=0.5
Accept-Encoding:    gzip, deflate
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

更新＃001

添加了我的loginService.js - 它正在调用api ok但不是json。

app.factory('loginService', function($http){
    return{
        login:function(user){
            console.log("enter login service");

            var $promise=$http.post('http://localhost:8080/api/login',user); //send data to the api

            $promise.then(function(msg){
                if(msg.data=='succes') console.log('succes login');
                else console.log('error login');

            });

        }
    }
});

Answer 1

假设user工厂的login()方法中的loginService参数是您要作为JSON有效负载发送的对象，则可以尝试以下操作：

    var payload = JSON.stringify(user);

    var promise = $http({
        url: '/api/login',
        method: 'POST',
        data: payload,
        headers: {'Content-Type': 'application/json'}
    });

    promise.then(function(...) {
       ...
    });

<强>更新

我还会在您的代码中合并两个.config()次调用。

app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
    $routeProvider.when('/login', {templateUrl: 'partials/login.html' });
    $routeProvider.otherwise({redirectTo: '/login'});

    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $httpProvider.defaults.headers.common['Access-Control-Max-Age'] = '1728000';
    $httpProvider.defaults.headers.common['Accept'] = 'application/json, text/javascript';
    $httpProvider.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';
    $httpProvider.defaults.useXDomain = true;
}]);

您已使用Content-Type全局设置了$httpProvider.defaults.headers.common['Content-Type']标题（即所有请求），因此我上面代码中的headers: {'Content-Type': 'application/json'}是多余的。

Answer 2

我在这里有以下问题：

您为一个模块使用2 config个部分。不确定这种方法是否可以预期。
据此the documentation，此类参数设置在run部分

angular - 使其调用接受json格式的api

更新＃001

2 个答案: