AngularJS:没有“访问控制允许来源"请求的资源上存在标头 [英] AngularJS: No "Access-Control-Allow-Origin" header is present on the requested resource

问题描述

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

var modulo = angular.module('progetto', ['ngRoute']);//配置我们的路由modulo.config(function ($routeProvider, $httpProvider) {$routeProvider//主页的路由.什么时候('/'， {templateUrl: 'listaFilm.html',控制器:'listaController'})//描述页面的路由.when('/:phoneName', {templateUrl: 'description.html',控制器:'描述控制器'});$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 = 数据；}).错误(功能(数据，状态){$scope.names = "请求失败";});});

通过这段代码，我按照 RESTful 原则调用 API.当我运行代码时，我遇到了这个问题:

<块引用>

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

在网上阅读我了解到我有一个名为 CORS 的问题......我尝试了几种提出的解决方案，但我没有解决问题.
我该如何解决这个问题?
我必须添加什么代码才能修复它?

解决方案

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

Access-Control-Allow-Headers: Content-Type访问控制允许方法:GET、POST、OPTIONS访问控制允许来源:*

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

I'm writting my webApp and I'm using AngularJS. In this app I have created a file called script.js and I report this code:

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

With this code I call API following RESTful principles. When I run the code i have this problem:

XMLHttpRequest cannot load https://api.getevents.co No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access.

Reading on the web I understood that I have a problem called CORS...I have tried several solutions proposed but I didn't resolve the problem.
How can I fix the problem?
What's the code that I must add for fix it?

解决方案

This is a server side issue. You don't need to add any headers in angular for cors. You need to add header on the server side:

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

First two answers here: How to enable CORS in AngularJs

这篇关于AngularJS:没有“访问控制允许来源"请求的资源上存在标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！