AngularJs——对 XMLHttpRequest 的访问已被 CORS 策略阻止 [重复]
Posted
技术标签:
【中文标题】AngularJs——对 XMLHttpRequest 的访问已被 CORS 策略阻止 [重复]【英文标题】:AngularJs -- Access to XMLHttpRequest has been blocked by CORS policy [duplicate] 【发布时间】:2020-05-30 22:43:05 【问题描述】:错误:
从源“http://localhost:8000”访问“http://localhost:8080/api/v1/locations”处的 XMLHttpRequest 已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。
我在 WebStorm 的 request.http 文件和 Postman 中测试了 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
【问题讨论】:
【参考方案1】:邮递员通常不会使用或考虑 CORS 标头。另一方面,浏览器需要它,如果它丢失,您会收到此错误。
在您的后端代码中,您应该将用于请求数据的域列入白名单。在您的情况下,这将是http://localhost:8080
。
我希望这是有道理的。
【讨论】:
是的,谢谢,我在我的 Java Spring 引导控制器中添加了“@CrossOrigin(origins = "localhost:8000", maxAge = 3600)"。【参考方案2】:添加.catch
块以记录错误:
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);
);
);
【讨论】:
这是我的控制台i.top4top.io/p_1507d02621.jpg以上是关于AngularJs——对 XMLHttpRequest 的访问已被 CORS 策略阻止 [重复]的主要内容,如果未能解决你的问题,请参考以下文章