AngularJS，为什么只能在 Firefox 中正确运行？答案

【问题标题】：AngularJS, only runs correctly in firefox why?AngularJS，为什么只能在 Firefox 中正确运行？
【发布时间】：2014-11-09 22:20:24
【问题描述】：

我正在使用 angularjs。我所做的示例在 Firefox 中完美运行，但不适用于任何其他浏览器。

在其他浏览器中按添加图片按钮在索引中出现的错误是：

XMLHttpRequest 无法加载 file:///C:/...../gifwallet/add_gif.html。仅 HTTP 支持跨源请求。

我不明白是什么问题。

index.html

<html lang="es" ng-app="gifwalletApp">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="stylesheets/app.css">

  <script src="javascripts/angular.js"></script>
  <script src="javascripts/angular-translate.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

  <script src="src/app.js"></script>
  <script src="javascripts/ui-bootstrap-tpls-0.11.0.min.js"></script> 

  <title>GIF Wallet</title>
</head>

<body>
 <div class="container">
  <div ng-controller="TranslateController">
   <button ng-click="changeLanguage('es')" translate="BUTTON_TEXT_ES"></button>
   <button ng-click="changeLanguage('en')" translate="BUTTON_TEXT_EN"></button>
  </div>
   <header ng-controller="MenuController">
        <ul class="nav nav-pills pull-right">
            <li class="active">
                <a href="#">
                    <span class="glyphicon glyphicon-home"></span> &nbsp;
                  <span class="badge pull-right">42</span> 
                </a>
            </li>
            <li>
                <a href="#" ng-click="add()"><span class="glyphicon glyphicon-plus"></span></a> 
            </li>
            <li>
                <a href=""><span class="glyphicon glyphicon-search"></span></a>
            </li>
        </ul>
        <h3 class="text-muted">GIF Wallet</h3>
    </header>

    <div id="images" class="row" ng-controller="gifListController"> 
        <div class="col-lg-12 media" ng-repeat="gif in giflist"> 
            <a href="" class="pull-left thumbnail">
                <img class="media-object" src="{{ gif.url }}"> 
            </a>
            <div class="media-object">
                <h4 class="media-heading">{{ gif.name }}</h4>
                <p>
                    <a><span class="glyphicon glyphicon-minus"></span> {{ 'FAVORITO' | translate }}</a>
                </p>    
                <p>
                    <a><span class="glyphicon glyphicon-heart"></span> {{ 'ELIMINAR' | translate }}</a>
                </p>
                <p>
                    Link: <a href="">{{ gif.url }}</a>
                </p>
            </div>
        </div>
    </div>

    <footer>
        <p>&copy; GIFWallet 2014</p>
    </footer>
</div>

app.js

var gifwalletApp = angular.module('gifwalletApp', ['ui.bootstrap','pascalprecht.translate']); 

gifwalletApp.config(function($translateProvider) {
  $translateProvider.translations('en', {
    FAVORITO: 'Favorite',
    ELIMINAR: 'Delete'
  })
 .translations('es', {
   FAVORITO: 'Favorito',
   ELIMINAR: 'Eliminar'
  });
 $translateProvider.determinePreferredLanguage();
});

gifwalletApp.controller('TranslateController', function($translate, $scope) {
  $scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
  };
});

gifwalletApp.controller('gifListController', ['$rootScope','$scope','Storage','$http', 
function($rootScope,$scope,Storage,$http){
  $scope.giflist = Storage.list();
  $rootScope.$on('reloadList', function(event, data){ 
    $scope.giflist = Storage.list();
  });

}]);

gifwalletApp.controller('MenuController', ['$rootScope','$scope', 'Storage','$modal', 
 function($rootScope,$scope, Storage, $modal) {

    $scope.add = function() {   
         $modal.open({
            templateUrl: 'add_gif.html',
            controller: function($scope, $modalInstance) {
                $scope.Gif = {};
                $scope.save = function() {

                     var image = {
                        'name': $scope.Gif.name,
                        'url': $scope.Gif.url,
                        'tags': [],
                        'favorite': false
                    };
                    Storage.save(image);

                    $rootScope.$broadcast('reloadList'); 
                    $modalInstance.dismiss('cancel');

                };

                $scope.cancel = function() {
                    $modalInstance.dismiss('cancel');
                };
            }
        });
    };

}
]);

 gifwalletApp.service('Storage', ['$window',    function($window) {

    var images = [];

    if (!$window.localStorage) {
        alert('No tienes localStorage activado');
    } else {
        images = $window.localStorage.getItem('gifWallet');
    }

    this.save = function(image) {

        if (images == null) {
            images = [];
        }
        else {
            images = angular.fromJson(images);    
        }
        images.push(image);
        imagesString = JSON.stringify(images);
        $window.localStorage.setItem('gifWallet', imagesString);

    }

    this.get = function(key) {

    }

    this.remove = function(key) {

    }

    this.list = function() {
        return angular.fromJson($window.localStorage.getItem('gifWallet'));
    }

}]);

add_gif.html

<div class="modal-header">
  <h3 class="modal-title">Agregar GIF</h3>    
  <p class="text-muted">Añade un gif favorito a tu wallet usando el nombre y la URL</p>
</div>
<div class="modal-body">
 <form action="" role="form">
    <div class="form-group">
        <label for="name">Nombre</label>
        <input type="text" id="name" ng-model="Gif.name" placeholder="Corgi bailarín" class="form-control"> 
    </div>
    <div class="form-group">
        <label for="url">URL</label>
        <input type="url" id="url" ng-model="Gif.url" placeholder="http://..." class="form-control">
    </div>
 </form>
</div>
 <div class="modal-footer">
    <button class="btn btn-link" ng-click="cancel()">Cancelar</button>
    <button class="btn btn-primary" ng-click="save()">Agregar GIF</button>
 </div>

【问题讨论】：

你能检查一下网络标签，看看它是否在其他浏览器中下载任何资源失败？
只需尝试下载每个 js 和 css 并从您的项目中添加。表示
我下载了每一个js和css，结果都是一样的。
Angular 发出跨域请求。 Firefox 允许，Chrome 和其他不允许。不客气。要使其在所有浏览器上运行，请启动本地服务器（例如 Apache）。
终于可以工作了：在本地使用 safari 和 firefox，在 ie、opera 和 chrome 中使用 xampp

标签： javascript jquery html angularjs

【解决方案1】：

当您在 Angular 中调用 partials 时，它会发出一个跨域请求。 Firefox 允许，Chrome 和其他不允许。

所以，您必须启动一个本地网络服务器才能使其在所有浏览器上运行（Apache、Xampp / Mamp 等）。

【讨论】：

【解决方案2】：

您的脚本仅在 firefox 上运行，因为 firefox 允许跨源请求（AJAX 请求）由于安全策略，chrome 将不允许跨源请求。

因此，为了在 chrome 中运行您的脚本，您必须在 chrome 中禁用网络安全

在 chrome 中禁用网络安全：

杀死 chrome 进程
按“ctrl+R”打开运行菜单
键入不带引号的“chrome --disable-web-security”，然后按回车
然后你就可以运行你的脚本了

如果您对其他浏览器有任何问题，请告诉我？

【讨论】：

第一部分很好，但提供的解决方案不是，恕我直言。我不认为禁用 Chrome 中的网络安全选项是一种选择...
我暂时提供了解决方案意味着我已经回答了他的问题。无论如何，如果要进行部署，他必须在服务器中托管脚本，那么就不需要做任何事情@enguerranws

【解决方案3】：

您不应该在 Angular 表达式中使用 src 属性。

使用ngSrc - as described in the docs。

<img class="media-object" ng-src="{{ gif.url }}">

编辑：在您的模态面板中，您需要确保提交的表单有效

从评论移到这里：

没有 http:// 就无法工作的原因可能是因为 URL 的输入字段是 type="url" 并且 url 对 http/https 无效。所以这里实际上是一个不同的问题。在添加图像之前，应验证表单。 :)

【讨论】：

我猜他是对的，更多关于它docs.angularjs.org/api/ng/directive/ngSrc
我放了ngsrc，结果错误消失了，但仍然不收费。
您是否真的在范围内拥有正确的 URL？介意做个笨蛋吗？
其实很快就做了一个plunker：plnkr.co/edit/Hgw9bvGXIXnDGNq6THvb?p=preview。似乎对我有用，在 Chrome 中。
我在 plunker 中尝试过，但添加照片时无法加载图片。