javascript - AngularJS CORS 问题

标签 javascript angularjs cors asp.net-web-api

我已经搜索了 200 多个站点(可能有点夸张,但并不多),了解如何使用 angularjs 处理 cors。我们有一台运行 Web API 服务器的本地机器。我们正在开发一个调用 API 获取数据的客户端。当从服务器运行客户端时,我们接收数据没问题。当我们从不同的域运行它时,我们在尝试获取数据时收到红色 200 响应和空白响应。这是一些代码:

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 的 url 时,它会吐出数据。在服务器上,我们允许跨域来源,这在我之前的陈述中显而易见。如您所见,我正在 myApp.config 中实现 header 覆盖,我什至尝试将其直接放在我的 Controller 中……没有区别……

此任务现在 3 天。

在此方面的帮助不胜感激。提前致谢。

最佳答案

您可能需要稍微更改您的 Web API。我遇到了同样的问题并写了一篇关于如何解决这个问题的帖子。

我使用 Sinatra 作为 API,我不知道你的网络服务使用什么语言,但我想你可以应用它。基本上,您需要通过定义允许哪些来源和哪些 HTTP 方法来配置您的服务器以接受 CORS 调用。

您说您已经在您的服务器上启用了它,但您具体做了什么?

有关详细信息,请参阅此帖子:CORS with angular.js

关于javascript - AngularJS CORS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17756550/

相关文章:

angularjs - angular 然后从服务中捕获成功错误

javascript - 从集合中添加或删除项目以及提升的效果

javascript - 从异步加载的外部脚本中使用 jQuery 插件

javascript - VueJS 组件

angularjs - Angular 类更改指令不起作用

java - 具有安全性的 AngularJS + Spring MVC - 从哪里开始?

javascript - 使用 React 和 Express 阻止跨域请求

具有 ASP.NET API 凭据的 JavaScript XMLHttpRequest

javascript - 使用 Fetch API 时捕获 "Failed to load resource"

javascript - MutationObserver 仅删除节点