AngularJS:请求的资源上不存在“Access-Control-Allow-Origin”标头

IT技术 javascript html angularjs xmlhttprequest cors
2021-01-18 03:16:06

我正在编写我的 webApp,我正在使用 AngularJS。在这个应用程序中,我创建了一个名为 script.js 的文件,并报告了以下代码:

var modulo = angular.module('progetto', ['ngRoute']);

    // configure our routes
    modulo.config(function ($routeProvider, $httpProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl: 'listaFilm.html',
                controller: 'listaController'
            })

            // route for the description page
            .when('/:phoneName', {
                templateUrl: 'description.html',
                controller: 'descriptionController'
            });


            $httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

    });


    modulo.controller('listaController', function ($scope, $http) {
        $http.get('https://api.getevents.co/event?&lat=41.904196&lng=12.465974').success(function (data) {
            $scope.names = data;
            }).
            error(function (data, status) {
                $scope.names = "Request failed";
            });
    });

使用此代码,我按照 RESTful 原则调用 API。当我运行代码时,我遇到了这个问题:

XMLHttpRequest 无法加载https://api.getevents.co请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问Origin ' http://localhost:8383 '。

在网上阅读我明白我有一个叫做 CORS 的问题......我已经尝试了几种提出的解决方案,但我没有解决问题。
我该如何解决这个问题?
我必须添加什么代码才能修复它?

2个回答

这是服务器端问题。您不需要为 cors 以角度添加任何标题。您需要在服务器端添加标头:

Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *

这里的前两个答案:如何在 AngularJs 中启用 CORS

这将取决于您的服务器技术,我找到了一个 w3 链接,其中有很多不错的选择:w3.org/wiki/CORS_Enabled
2021-03-16 03:16:06
Access-Control-Allow-Origin: *是什么解决了我的问题。根据记录,我构建了一个 Go 微服务,w.Header().Add("Access-Control-Allow-Origin", "*")是实际工作的线路。
2021-03-19 03:16:06
对于Springboot应用程序,添加@CrossOrigin其余控制器对我有用。
2021-03-19 03:16:06
我如何以及在哪里在我的代码中编写此代码?
2021-03-24 03:16:06
@Sion Cav 你添加你的解决方案作为答案吗?很高兴看到您是如何/在哪里做到这一点的。
2021-03-31 03:16:06

CORS 是跨域资源共享,如果您尝试从一个域访问另一个域,则会出现此错误。

尝试使用 JSONP。在您的情况下,JSONP 应该可以正常工作,因为它只使用 GET 方法。

尝试这样的事情:

var url = "https://api.getevents.co/event?&lat=41.904196&lng=12.465974";
$http({
    method: 'JSONP',
    url: url
}).
success(function(status) {
    //your code when success
}).
error(function(status) {
    //your code when fails
});
我的荣幸..!!!!
2021-03-15 03:16:06
那么post、put、delete呢??
2021-03-20 03:16:06
由于这些成功和错误方法不可链接,因此已从 angular 中删除。我们应该使用.then() stackoverflow.com/questions/35329384/...
2021-03-23 03:16:06
极好的。非常感谢!
2021-04-02 03:16:06
JSONP 仅支持 GET
2021-04-09 03:16:06