CORSエラー - $コンパイルエラーが発生し、XMLHttpRequestでエラーを読み込めませんか？

正しいURLを指定しても、私のAngularディレクティブを取得できないのですが、$コンパイルエラーが発生し、XMLHttpRequestがエラーをロードできないのはなぜですか？

私は角度のあるアプリから始めました。私は2つの異なるエラーが出てくるので、私は指示を含むことができません。

XMLHttpRequest cannot load/Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

私は少し研究している、tは、私は理解していないものを避けるため、サーバーをセットアップするための提案がありました。なぜ私はそれが本当に必要ない場合バックエンドなしで角度/ HTMLを使用してアプリを構築することはできません。そのエラーの原因は何ですか？（： 'はJS /ナビゲーションバー/ navbar.html' templateUrl）またはで明らかにテンプレートのURLがしかしincorrectly-綴られたとき、私はルートから全体のパスを提供起こる

Error: $compile:upload

それは間違っている？ありがとうございます。/index.htmlを

Project1の：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <title>page</title> 
    <link rel="stylesheet" type="text/css" href="public/css/style.css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"> </script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/navbar/navbar.js"></script> 
</head> 

<body ng-app="myApp"> 
    <header></header> 

    <navbar></navbar> 
    <ui-view></ui-view> 
</body> 

</html>

のProject1の/のJS/

'use strict'; 
var app=angular.module('myApp', ['ui.router', 'ui.materialize']);

Project1の/ JS /ナビゲーションバー/ navbar.js

'use strict'; 

app.directive('navbar', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'js/navbar/navbar.html' 
    } 
});

Project1のをapp.js /js/navbar/navbar.html

<div class="navbar navbar-static-top navbar-inverse"> 
    <div class="container"> 
     <ul class="nav navbar-nav"> 
      <li> 
      Hello 
      </li> 
     </ul> 
    </div> 
</div>

出典

2017-01-07 javascripting

角度アプリを実行するには常にサーバーを使用するか、クロスオリジンエラーが発生する可能性があります。サーバーの意志が、私はplunker少しので、我々はあなたのコードは、エラーがないことを確認しているんでした

'use strict'; 
app.directive('navbar', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'navbar.html' 
    } 
});

であるためにあなたのディレクティブを編集paths.Thenあなたのファイルをresoveするのに役立ちます。

絶対パスの使用についてはわかりませんが、使用する場合は「C：projects/project1/js/navbar/navbar.js」のように入力する必要があります http-サーバーにインストールして使用するのは簡単です。あなたの質問にお答えしますようお願いいたします。

出典

2017-01-07 04:41:33

ありがとうございます。私はノードエクスプレスサーバーを追加しました。今すぐ動作します。サーバーを作成しない限り、角型アプリケーションが機能しない理由を説明できますか？ jus simple htmlを使用した場合、角度の違いは何ですか？ありがとうございます！ – javascripting

実際、私は間違っていました。何も動作せず、XMLHttpRequestエラーを受け取っていませんが、$ compileエラーがディレクティブによって引き起こされている必要があります（index.htmlファイルからディレクティブを削除した場合、エラーは消えます）。私はtemplateUrl： 'navbar.html'を 'nabber.html'に変更しました。 – javascripting

CORSエラー - $コンパイルエラーが発生し、XMLHttpRequestでエラーを読み込めませんか？

答えて

関連する問題