angularjs CORS Sorunlar

Question

I (ama fazla değil, belki abarttığını) angularjs ile Cors idare edebilmek için nasıl 200 siteler üzerinde aradık. Web API sunucusu çalıştıran yerel bir makinemiz var. Veri için API'yi arayan bir istemci geliştiriyoruz. İstemciyi sunucudan çalıştırırken, hiç sorun değil. Bunu farklı bir alandan çalıştırdığımızda, verileri almaya ve boş bir yanıt almaya çalışırken kırmızı bir 200 yanıt alıyoruz. İşte bazı kod:

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

Ben de $ http kullanarak bu denedi ama aynı yanıt (veya bunların eksikliği) almak:

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) { 

    } 
}; 
}); 

Sadece kadar hizmet veriyor url göz tarayıcıdaki json, verileri tükürür. Sunucuda, önceki ifademden açıkça anlaşılan çapraz alan kaynaklarına izin veriyoruz. Eğer ben başlıklarını uygulamak am bkz myApp.config içinde geçersiz kılar gibi Hatta bu göreve

3 gün ... şimdi denetleyicisi ... hayır fark doğrudan koyarak çalıştılar.

Bu konuda yardımcı olmaktan çok DAHA FAZLASI. Şimdiden teşekkürler.

Answer 1

Web API'nızı biraz değiştirmeniz gerekebilir. Aynı sorunla karşılaştım ve bu sorunun nasıl düzeltileceğiyle ilgili bir yazı yazdım.

ben size webservices için kullandığınız hangi dili bilmiyorum API için Sinatra kullanılan ama bunu uygulayabilirsiniz sanırım. Temel olarak, hangi kökenleri ve hangi HTTP yöntemlerine izin verildiğini tanımlayarak sunucunuzu CORS çağrılarını kabul edecek şekilde yapılandırmanız gerekir.

Bunu zaten sunucunuzda etkinleştirdiğiniz söylediniz, ancak tam olarak ne yaptınız?

fazla ayrıntı için bu yazı bakın: CORS with angular.js

Answer 2

Eğer CORS paketini yükleyip web sunucusunun başlatma içinde CORS ilklendirmelisiniz WebAPI o ASP.NET ise. Eğer verileriyle WebAPI POST istediğiniz olacak o zaman biraz yapmanız gerekir ise

var cors = new EnabledCorsAttribute("*", "*", "DataServiceVersion, MaxDataServiceVersion"); 
config.EnableCors(cors); 

Answer 3

:

paket gibi bir şey içinde WebiApiConfig.cs koymak ise Microsoft.OWin.Cors

denir Chrome'un çalışması için daha fazla. Ön fareyi engellemeniz ve istemci kaynağını izin verilen bir kaynak olarak eklemeniz gerekir.

bunun için daha iyi bir çözüm varsa o zaman bu sorun üzerinde çalışan birçok gün sonra sadece ben bulamadım. Sonunda, bu benim için çalıştı.

İyi şanslar ...

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 4

Web alanları arası isteklerini işlemek için Web API biraz değiştirmeniz gerekir. Web Aspire projesinde Microsoft Asp-Net Sunucu Korsesi kitaplığını ve birkaç tane daha kod düzeyi değişikliklerini de dahil edin ve hazırsınız. daha göz here.

sahip İçin Eğik kısım tamamen gayet iyi.