AngularJS de la SCRO Questions

Question

J'ai cherché sur plus de 200 sites(peut-être exagérer, mais pas de beaucoup) sur la façon d'être en mesure de gérer la scro avec angularjs. Nous avons un local de la machine en cours d'exécution d'une API web server. Nous développons un client qui appelle l'API pour les données. Lors de l'exécution du client à partir du serveur nous recevons des données à pas de problème. Lorsque nous l'exécuter à partir d'un domaine différent, nous obtenons un rouge 200 réponse lors de la tentative d'extraction de données et un vide de réponse. Voici un code:

var myApp = angular.module('Project', ['ngResource']);

myApp.config(function($routeProvider){
    $routeProvider.
        when('/new', {templateUrl:'templates/new.html', controller:'EditProjectController'}).
        when('/mobile', {templateUrl:'templates/mobile.html', controller:'ProjectController'}).
        when('/it', {templateUrl:'templates/it.html', controller:'ProjectController'}).
        when('/writing', {templateUrl:'templates/writing.html', controller:'ProjectController'}).
        when('/all', { templateUrl: 'templates/all.html' }).
        when('/login', { templateUrl: 'partials/_login.html' }).
        otherwise({ redirectTo: '/all' });
});
myApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);



myApp.controller('ProjectController', 
function myApp($scope, $http, projectDataService, userLoginService) {
    $http.defaults.useXDomain = true;
    $scope.loadProject = function(){
        projectDataService.getProject(function(project){
            $scope.project = project;
            })


    };
    $scope.loadProject();
}

);

myApp.factory('projectDataService', function ($resource, $q) {
var resource = $resource('http://webapiserver/api/:id', { id: '@id' });
return {
    getProject: function () {
        var deferred = $q.defer();
        resource.query({ id: 'project' },
            function (project) {
                deferred.resolve(project);
            },
            function (response) {
                deferred.reject(response);
            });

        return deferred.promise;
    },
    save: function (project) {
        var deferred = $q.defer();
        project.id = 'project/9';
        resource.save(project,
            function (response) { deferred.resolve(response); },
            function (response) { deferred.reject(response); }
            );
        return deferred.promise;
    }
};
});

J'ai aussi essayé en utilisant $http, mais j'obtiens la même réponse (ou l'absence de celui-ci):

myApp.factory("projectDataService", function ($http) {

return {
    getProject: function (successcb) {
        $http.get("http://webapiserver/api/project").
        success(function (data, status, headers, config) {
            successcb(data);
        }).
        error(function (data, status, headers, config) {

    }
};
});

Quand je viens de parcourir à l'url qui est de servir le json dans le navigateur, il crache sur les données. Sur le serveur, nous permettant de croiser domaine origines qui se manifeste par ma déclaration précédente. Comme vous pouvez le voir je suis en œuvre les en-têtes des remplacements dans myApp.config j'ai même essayé de le mettre directement dans mon contrôleur... pas de différence...

3 jours maintenant sur cette tâche.

Est des PLUS appréciée. Merci à l'avance.

Answer 1

Vous devrez peut-être changer votre Web API un peu. J'ai rencontré le même genre de problème et a écrit un post sur la façon de résoudre ce problème.

J'ai utilisé Sinatra pour l'API, je ne sais pas quelle est la langue que vous utilisez pour vos webservices, mais je suppose que vous pouvez appliquer. Fondamentalement, vous devez configurer votre serveur pour accepter la SCRO appels par la définition de l'origine et dont les méthodes HTTP sont autorisés.

Vous avez dit que vous avez déjà l'activer sur votre serveur, mais vous avez fait quoi exactement ?

Voir ce post pour plus de détails : avec de la SCRO angular.js

Answer 2

Si vous allez vouloir POSTER votre WebApi avec les données, alors vous aurez besoin de faire un peu plus pour Chrome pour travailler. Vous aurez besoin d'intercepter le contrôle en amont et inclure les clients de l'origine, comme un permis origine.

Si il est une meilleure solution pour cette puis, après de nombreux jours de travail sur ce problème exclusivement, je ne pouvais pas le trouver. Enfin, c'est ce qui a fonctionné pour moi.

Bonne chance...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Routing;

namespace MashupCoreApiApi
{
    public class WebApiApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            GlobalConfiguration.Configure(WebApiConfig.Register);
        }


        protected void Application_BeginRequest(object sender, EventArgs e)
        {

            if (Context.Request.Path.Contains("api/") && Context.Request.HttpMethod == "OPTIONS")
            {

                Context.Response.AddHeader("Access-Control-Allow-Origin", Context.Request.Headers["Origin"]);
                Context.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
                Context.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST PUT, DELETE, OPTIONS");
                Context.Response.AddHeader("Access-Control-Allow-Credentials", "true");
                Context.Response.End();
            }

        } 

    }
}

Answer 3

Si c'est ASP.NET WebAPI vous avez besoin d'installer de la SCRO paquet et initialiser la SCRO dans le démarrage du serveur web.

Le package s'appelle Microsoft.OWin.De la scro

Dans le WebiApiConfig.cs de mettre quelque chose comme:

var c = new EnabledCorsAttribute("", "", "DataServiceVersion, MaxDataServiceVersion"); config.EnableCors(scro);