angular中的$http请求跨域，获取不到后台数据

最新推荐文章于 2021-10-20 14:35:46 发布

静安书以沫

最新推荐文章于 2021-10-20 14:35:46 发布

阅读量469

点赞数

分类专栏：错误集

本文链接：https://blog.csdn.net/whatname123/article/details/114710060

版权

错误集专栏收录该内容

9 篇文章 0 订阅

订阅专栏

遇到的问题是这样的：

前端页面demo2.xml


<!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta charset="UTF-8">
    <title>demo2</title>
    <script src="angular.min.js"></script>
    <script>
        var brandapp = angular.module("youlexuan", []);
        brandapp.controller("brandController", function ($scope, $http) {
            $scope.brandlist = [{name:"测试",id:0,firstChar:"C"}];
            $scope.getBrandList = function () {
                $http.post("http://127.0.0.1:9101/brand/all.do").success(function (aaa) {
                    $scope.brandlist = aaa;
                })
            }
        })
    </script>
</head>
<body ng-app="youlexuan" ng-controller="brandController">
<button ng-click="getBrandList()">获取品牌集合</button>
{{brandlist}}
    <table border="1" width="50%">
        <tr ng-repeat="brand in brandlist">
            <td>{{brand.id}}</td>
            <td>{{brand.name}}</td>
            <td>{{brand.firstChar}}</td>
        </tr>
    </table>
</body>
</html>

本段代码没有错误。

直接访问http://127.0.0.1:9101/brand/all.do路径是没有问题的，可以看到获取的数据。但是通过angular中的$http请求

$http.post("http://127.0.0.1:9101/brand/all.do").success(function (aaa) {
$scope.brandlist = aaa;
})

，获取不到后台数据。

后来转到火狐浏览器调试，发现

火狐浏览器报错

接着对此问题进行了学习。

解决方法

进入controller层，修改调用的方法

原图：

对原图中代码进行修改，修改后：

修改后图

即：在请求响应后，返回数据前，添加响应头 Access-Control-Allow-Origin，值为*，就是匹配任意请求地址

静安书以沫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
angular中的$http请求跨域，获取不到后台数据

遇到的问题是这样的：前端页面demo2.xml<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <meta charset="UTF-8"> <title>demo2</title> <script src="angul...
复制链接

扫一扫