首页 > 解决方案 > AngularJs——对 XMLHttpRequest 的访问已被 CORS 策略阻止

问题描述

错误 :

从源“ http://localhost:8000 ”访问“ http://localhost:8080/api/v1/locations ”的 XMLHttpRequest已被 CORS 策略阻止:不存在“Access-Control-Allow-Origin”标头在请求的资源上。

我在 WebStorm 和 Postman 的 request.http 文件中测试了 get 方法,并且该方法有效,但这在我的 Angularjs 项目中不起作用。(我从一个 Spring Boot java 项目中获得)。

var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope, $http) {
    $http.get("http://localhost:8080/api/v1/locations")
            .then(function(response) {
              $scope.result = response.data;
              console.log("OK:", response.data);
            }).catch(function(response) {
              console.log("ERROR:", response);
    });
  });

我的 get 函数在邮递员中返回类似的东西

[
 {
   "datetime": "2019-01-10T19:00:00.000+0000",
"user": {
  "firstName": "thr",
  "lastName": "an",
  "id": 1
},
"speed": 0.0,
"latitude": 37.421998333333335,
"longitude": -122.08400000000002,
"id": 1
},

{
   "datetime": "2019-01-10T19:01:00.000+0000",
"user": {
  "firstName": "thr",
  "lastName": "an",
  "id": 1
},
"speed": 1.575,
"latitude": 37.42198333333335,
"longitude": -122.080000000002,
"id": 2
}
]

控制台:https ://i.top4top.io/p_1507d02621.jpg

在此处输入图像描述

标签: angularjscorssame-origin-policy

解决方案


Postman 通常不会使用或考虑 CORS 标头。另一方面,浏览器需要它,如果它丢失,您会收到此错误。在您的后端代码中,您应该将用于请求数据的域列入白名单。在你的情况下,这将是http://localhost:8080. 我希望这是有道理的。


推荐阅读