AngularJS CORS問題

我已經搜索了超過200個網站（可能誇大，但不是太多）如何能夠與angularjs處理cors。我們有一臺運行Web API服務器的本地機器。我們正在開發一個調用API數據的客戶端。當從服務器運行客戶端時，我們收到的數據沒有問題。當我們從不同的域中運行它時，我們會在嘗試獲取數據和空白響應時收到紅色200響應。下面是一些代碼：AngularJS CORS問題

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

我也嘗試過這種使用$ HTTP，但我得到了相同的反應（或缺乏）：

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

    } 
}; 
});

當我瀏覽到提供了網址瀏覽器中的json會將數據吐出。在服務器上，我們允許跨域起源，這在我以前的陳述中很明顯。正如你可以看到我在myApp.config中實現頭部覆蓋，我甚至嘗試將它直接放在我的控制器中...沒有區別...

3天現在在這個任務上。

幫助與此相比，不勝感激。提前致謝。

來源

2013-07-19 Shane

那麼你的GET請求失敗了？請顯示請求和響應的標題。如果您只是在Chrome上打開網絡標籤並在標題部分包含所有內容，這將是最簡單的。 –

如果您在Chrome瀏覽器中查看devtools中的XHRRequest，例如 –

您可能需要稍微更改您的Web API。我遇到了同樣的問題，並寫了一篇關於如何解決這個問題的文章。

我使用Sinatra的API，我不知道你使用什麼語言爲你的web服務，但我想你可以應用它。基本上，您需要將服務器配置爲通過定義允許哪些來源和哪些HTTP方法來接受CORS調用。

你說你已經在你的服務器上啓用了它，但你做了什麼？

看到這個職位的詳細信息：CORS with angular.js

來源

2013-08-25 07:03:29

，如果您使用的是Wildfly（JBOSS 8.X），您會看到跨域標題和選項握手的發生：我編寫了一個名爲CorsFilter的簡單Java類，它添加了一些CORS頭部到Web服務的響應。該示例的鏈接位於http://stackoverflow.com/questions/23346863/deployd-data-retrieved-via-angularjs-cors/23434583#23434583底部。 – javaauthority

到您的個人博客的鏈接似乎被打破。 – mlhDev

如果ASP.NET的WebAPI您需要安裝CORS包和Web服務器的啓動初始化CORS。

包在像叫Microsoft.OWin.Cors

在WebiApiConfig.cs地說：

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

來源

2014-08-21 16:06:21 pinnprophead

如果你打算要發佈與數據的的WebAPI，那麼你就需要做一點點更多用於Chrome的工作。您需要攔截預檢，並將客戶起源作爲允許來源。

如果有更好的解決方案，那麼經過多天專門處理這個問題後，我無法找到它。最後，這是對我有用的。

好運...

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

     } 

    } 
}

來源

2014-10-28 13:48:27 user3448990

您需要修改您的Web API一點點地處理跨域請求。在Web Api項目中包含Microsoft Asp-Net Server Cors庫以及更少的代碼級別修改，您就可以開始使用了。爲更多看看here.

你的角部分是完全沒問題的。

來源

2015-02-06 07:17:16

AngularJS CORS問題

回答

相關問題