设置Access-Control-Allow-Origin实现跨域HTTP请求
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
设置Access-Control-Allow-Origin实现跨域HTTP请求
错误:
Failed to load xxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
背景:
在学习AngularJS的$http服务测试demo时出现该错误,demo实例:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>服务器相应的信息为:</h1>
<p>{{ responseMsg }}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$http){
$http({
method: 'GET',
url: 'http://www.flyroc.top:8001/server0project/hello'
}).then(function successCallback(response) {
$scope.responseMsg = response.data;
}, function errorCallback(response) {
});
});
</script>
解决:
⽬前的浏览器为了数据的安全,所有请求被严格限制在同⼀域名下,如果需要从不同的服务器(不同域名)上获取数据,那么需要使⽤跨域HTTP请求。
实现跨域的⽅式是在请求的⽬标⽹站后台中(以java servlet为例)添加如下代码:
response.setHeader("Access-Control-Allow-Origin","*"); //允许所有域名访问
response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
response.setHeader("Access-Control-Allow-Credentials", "true");
亲测只⽤response.setHeader("Access-Control-Allow-Origin","*");可以解决。