2013-07-19 16 views
41

Tôi đã tìm kiếm trên 200 trang web (có thể phóng đại, nhưng không nhiều) về cách có thể xử lý cors với angularjs. Chúng tôi có một máy địa phương đang chạy một máy chủ API web. Chúng tôi đang phát triển một ứng dụng khách gọi API cho dữ liệu. Khi chạy máy khách từ máy chủ, chúng tôi nhận được dữ liệu không có vấn đề gì. Khi chúng tôi chạy nó từ một miền khác, chúng tôi nhận được phản hồi 200 màu đỏ khi cố gắng tìm nạp dữ liệu và phản hồi trống. Dưới đây là một số mã:AngularJS CORS Các vấn đề

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

Tôi cũng đã cố gắng này sử dụng $ http nhưng tôi nhận được câu trả lời tương tự (hoặc thiếu):

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

    } 
}; 
}); 

Khi tôi chỉ cần duyệt đến url được phục vụ tối đa các json trong trình duyệt nó spits ra các dữ liệu. Trên máy chủ, chúng tôi cho phép nguồn gốc tên miền chéo rõ ràng bằng tuyên bố trước đó của tôi. Như bạn có thể thấy tôi đang thực hiện các tiêu đề ghi đè trong myApp.config Tôi thậm chí đã thử đặt nó trực tiếp trong bộ điều khiển của tôi ... không có sự khác biệt ...

3 ngày bây giờ về nhiệm vụ này.

Trợ giúp với điều này là THÊM được đánh giá cao. Cảm ơn trước.

+0

Vì vậy, yêu cầu GET của bạn không thành công?Vui lòng hiển thị tiêu đề của yêu cầu và phản hồi. Sẽ dễ nhất nếu bạn chỉ cần mở tab mạng trên Chrome và bao gồm mọi thứ trong phần tiêu đề. –

+0

Bạn có thể thấy tiêu đề tên miền chéo và bắt tay Tùy chọn xảy ra nếu bạn xem xét XHRRequest trong devtools trong Chrome chẳng hạn –

Trả lời

11

Bạn có thể cần phải thay đổi API Web của mình một chút. Tôi đã gặp cùng một loại vấn đề và đã viết một bài đăng về cách khắc phục vấn đề này.

Tôi đã sử dụng Sinatra cho API, tôi không biết bạn đang sử dụng ngôn ngữ nào cho dịch vụ web của mình nhưng tôi đoán bạn có thể áp dụng nó. Về cơ bản, bạn cần phải cấu hình máy chủ của bạn để chấp nhận các cuộc gọi CORS bằng cách xác định nguồn gốc nào và phương thức HTTP nào được cho phép.

Bạn đã nói bạn đã bật nó trên máy chủ của mình, nhưng bạn đã làm gì chính xác?

Xem bài này để biết thêm chi tiết: CORS with angular.js

+0

Nếu bạn đang sử dụng Wildfly (JBOSS 8.X), tôi đã viết một lớp Java đơn giản có tên là CorsFilter. tiêu đề để trả lời cho một dịch vụ web. Liên kết đến ví dụ này có tại http://stackoverflow.com/questions/23346863/deployd-data-retrieved-via-angularjs-cors/23434583#23434583 tất cả các cách ở dưới cùng. – javaauthority

+1

Liên kết tới blog cá nhân của bạn dường như bị hỏng. – mlhDev

0

Nếu đó là ASP.NET WebAPI bạn cần phải cài đặt gói CORS và khởi CORS trong khởi động của máy chủ web.

Các gói phần mềm được gọi là Microsoft.OWin.Cors

Trong WebiApiConfig.cs đặt trong một cái gì đó như:

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

Nếu bạn đang muốn POST để WebAPI của bạn với dữ liệu sau đó bạn sẽ cần phải làm một chút nhiều hơn để Chrome hoạt động. Bạn sẽ cần phải chặn ánh sáng trước và bao gồm nguồn gốc của khách hàng dưới dạng nguồn gốc được phép.

Nếu có giải pháp tốt hơn cho vấn đề này thì sau nhiều ngày làm việc về vấn đề này, tôi không thể tìm thấy nó. Cuối cùng, đây là những gì làm việc cho tôi.

Chúc may mắn ...

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

     } 

    } 
} 
0

Bạn cần phải sửa đổi API Web của bạn một chút để xử lý các yêu cầu miền chéo. Bao gồm thư viện Microsoft Asp-Net Server Cors trong dự án Web Api và một vài sửa đổi cấp mã khác và bạn đã sẵn sàng sử dụng. Để biết thêm chi tiết, hãy xem here.

Phần góc của bạn hoàn toàn ổn.

Các vấn đề liên quan