angular的http请求本地文件出现跨域提醒

最新推荐文章于 2021-06-07 23:08:41 发布

Tiramisu_C

最新推荐文章于 2021-06-07 23:08:41 发布

阅读量2.6k

点赞数 1

分类专栏： AngularJs 前端开发综合前端开发项目问题解决方案文章标签： angular http 跨域解决

本文链接：https://blog.csdn.net/nongweiyilady/article/details/77750549

版权

前端开发项目问题解决方案同时被 3 个专栏收录

31 篇文章 12 订阅

订阅专栏

前端开发综合

19 篇文章 1 订阅

订阅专栏

AngularJs

5 篇文章 0 订阅

订阅专栏

用angular测试请求本地的json数据，请求出错，提示跨域，我的代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>angular使用http请求数据</title>
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="testCtrl">
  <h1>angular使用http请求数据</h1>
  请求结果：{{resultData}}
<script>
    var module=angular.module("app",[]);
    module.controller("testCtrl",function($scope,$http){
        $http({
            method:"GET",
            url:"test.json"
        }).then(function successCallback(res){
            $scope.resultData=res.data;
        }).then(function errorCallback(res){
            $scope.resultData="请求出错啦";
        });
    });
</script>
</body>
</html>

test.json代码如下:

{
  "sites": [
    {
      "Name": "Google",
      "Url": "www.google.com",
      "Country": "USA"
    },
    {
      "Name": "Facebook",
      "Url": "www.facebook.com",
      "Country": "USA"
    },
    {
      "Name": "微博",
      "Url": "www.weibo.com",
      "Country": "CN"
    }
  ]
}

原因：因为浏览器为了出于安全考虑把请求本地视为跨域请求。

解决办法：

第一步：关闭谷歌浏览器；

第二步：ctrl+r输入cmd进入控制台，输入如下命令：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

注意：一定要先关闭浏览器才生效哦；然后再打开html文件就可以获取到数据了。

Tiramisu_C

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angular的http请求本地文件出现跨域提醒

用angular测试请求本地的json数据，请求出错，提示跨域，我的代码如下： angular使用http请求数据 angular使用http请求数据请求结果：{{resultData}} var module=angular.module("app",[]); module.controller("testCtrl",funct
复制链接

扫一扫