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

16 浏览
0 Comments

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

这个问题已经有了答案:

为什么我的JavaScript代码在Postman没有问题，但是接收到了 \"No \'Access-Control-Allow-Origin\' header is present on the requested resource\" 的错误？

我正在编写我的Web应用程序，我正在使用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\'。因此，源 \'http://localhost:8383\' 不允许访问。

在网上阅读后，我理解了我遇到了一个叫做CORS的问题...我尝试了几个提出的解决方案，但是问题仍然没有得到解决。

我该如何解决问题？

我需要添加什么代码来解决它？

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

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

0
0 Comments

这是一个服务器端的问题。您不需要在 Angular 中添加任何跨域请求 (cors) 需要的头信息。
您需要在服务器端添加头信息：

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

关于如何启用 CORS 在 AngularJS 中，请参考前两个答案：How to enable CORS in AngularJs

0