Kesalahan AngularJS: Permintaan lintas asal hanya didukung untuk skema protokol: http, data, ekstensi chrome, https

130

Saya memiliki tiga file aplikasi js sudut yang sangat sederhana

index.html

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script>
    <script type="text/javascript" src="app.js"></script>
  </head>

  <body ng-controller="StoreController as store">
      <div class="list-group-item" ng-repeat="product in store.products">
        <h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3>
      </div>

  <product-color></product-color>
  </body>
</html>

product-color.html

<div class="list-group-item">
    <h3>Hello <em class="pull-right">Brother</em></h3>
</div>

app.js

(function() {
  var app = angular.module('gemStore', []);

  app.controller('StoreController', function($http){
              this.products = gem;
          }
  );

  app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          templateUrl: 'product-color.html'
      };
   }
  );

  var gem = [
              {
                  name: "Shirt",
                  price: 23.11,
                  color: "Blue"
              },
              {
                  name: "Jeans",
                  price: 5.09,
                  color: "Red"
              }
  ];

})();

Saya mulai mendapatkan kesalahan ini segera setelah saya memasukkan menyertakan product-color.html menggunakan direktif kustom bernama productColor:

XMLHttpRequest cannot load file:///C:/product-color.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/product-color.html'.

Apa yang salah? Apakah ini masalah jalur untuk product-color.html?

Ketiga file saya berada di folder root yang sama C:/user/project/

javascript html angularjs xmlhttprequest pengguna3422637
sumber
1
Hanya penunjuk cepat bahwa jika Anda melakukan sesuatu yang bodoh, seperti dalam kasus saya, saya secara tidak sengaja menambahkan TLD ke port: " localhost: 8070.com " maka Anda akan menerima kesalahan yang sama. Periksa URL apa yang ingin Anda selesaikan!
Wildhoney
Mungkin serupa di sini: stackoverflow.com/questions/10752055/…
Ngô Đức Tuấn
Kemungkinan duplikat dari "permintaan asal silang hanya didukung untuk HTTP." kesalahan saat memuat file lokal

Jawaban:

306

Kesalahan ini terjadi karena Anda hanya membuka dokumen html langsung dari browser. Untuk memperbaikinya, Anda harus menayangkan kode dari server web dan mengaksesnya di localhost. Jika Anda memiliki pengaturan Apache, gunakan untuk melayani file Anda. Beberapa IDE telah dibangun di server web, seperti JetBrains IDE, Eclipse ...

Jika Anda memiliki pengaturan Node.Js maka Anda dapat menggunakan http-server . Jalankan saja npm install http-server -gdan Anda akan dapat menggunakannya di terminal suka http-server C:\location\to\app.

Kirill Fuchs
sumber
6
Solusi yang sangat baik!
Jorge
3
Http-server adalah cara paling sederhana yang pernah saya lihat tentang hosting secara lokal. Catatan: Jika Anda tidak memiliki npm di windows, cukup instal node.js dan itu akan tersedia dalam cmd.
Octane
3
Dan jika itu terjadi di tampilan web di android, apa yang harus saya lakukan !?
Dr.jacky
2
Karena penasaran, mengapa tidak mungkin hanya membuka file di browser web?
tobiak777
3
@reddy Plain dan sederhana: Ini adalah masalah keamanan bagi browser untuk mengakses sistem file secara langsung di komputer Anda.
Alex J
49

FIX SANGAT SEDERHANA

  1. Buka direktori aplikasi Anda
  2. Mulai SimpleHTTPServer


Di terminal

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

Sekarang, masuk ke localhost: 8000 di browser Anda dan halaman akan ditampilkan

Chirag
sumber
8
Dalam Python 3, seharusnya python -m http.server.
Luan Nico
1
Ini banyak membantu! Solusi bagus
mirta
42

Operasi tidak diizinkan dalam chrome. Anda bisa menggunakan server HTTP (Tomcat) atau Anda menggunakan Firefox.

daniel
sumber
4
Saya menggunakan firefox sebagai gantinya dalam situasi saya dan itu berhasil. Apakah Chrome memiliki keamanan lebih dari Firefox? Mengapa saya diizinkan melakukan ini ....
thatOneGuy
Itu jawaban terbaik untukku.
Thomas
1
Singkat dan Sederhana ... Berhasil!
viks
benar-benar membantu saya juga.
Ram Dutt Shukla
1
Hai..terima kasih banyak .. jawabanmu sangat membantu ... menyelamatkan banyak waktuku
Megha
31

Masalah saya teratasi hanya dengan menambahkan http://ke alamat url saya. misalnya saya menggunakan http://localhost:3000/moviessebagai gantinya localhost:3000/movies.

Ali Sepehri.Kh
sumber
13

Jika Anda menggunakan ini di browser chrome / chromium (mis: di Ubuntu 14.04), Anda dapat menggunakan salah satu dari perintah di bawah ini untuk mengatasi masalah ini. 

ThinkPad-T430:~$ google-chrome --allow-file-access-from-files
ThinkPad-T430:~$ google-chrome --allow-file-access-from-files fileName.html

ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files
ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files fileName.html

Ini memungkinkan Anda untuk memuat file dalam chrome atau chromium. Jika Anda harus melakukan operasi yang sama untuk windows, Anda dapat menambahkan sakelar ini di properti pintasan krom atau menjalankannya cmddengan bendera. Operasi ini tidak diizinkan di Chrome, Opera, Internet Explorer secara default. Secara default ini hanya berfungsi di firefox dan safari. Karenanya menggunakan perintah ini akan membantu Anda.

Sebagai alternatif, Anda juga dapat meng-host-nya di server web apa pun (Contoh: Tomcat-java, NodeJS-JS, Tornado-Python, dll) berdasarkan bahasa yang Anda sukai. Ini akan berfungsi dari browser apa pun.

Tejus Prasad
sumber
12

Jika karena alasan apa pun Anda tidak dapat meng-host file dari server web dan masih membutuhkan semacam cara memuat parsial, Anda dapat menggunakan ngTemplatedirektif.

Dengan cara ini, Anda dapat memasukkan markup di dalam tag skrip di file index.html Anda dan tidak harus menyertakan markup sebagai bagian dari arahan yang sebenarnya.

Tambahkan ini ke index.html Anda

<script type='text/ng-template' id='tpl-productColour'>
 <div class="list-group-item">
    <h3>Hello <em class="pull-right">Brother</em></h3>
</div>
</script>

Kemudian, dalam arahan Anda:

app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          //template: 'tpl-productColour'
          templateUrl: 'tpl-productColour'
      };
   }
  );
tautan64
sumber
Karena saya sudah mengedit posting ini, gunakan templateUrl: 'tpl-productColor'
HANU
5

Penyebab utama:

Protokol file tidak mendukung permintaan lintas asal untuk Chrome

Solusi 1:

gunakan protokol http sebagai ganti file, artinya: mengatur server http, seperti apache, atau nodejs + http-server

Sotution 2:

Tambahkan --allow-file-akses-dari-file setelah target pintasan Chrome, dan buka instance penelusuran baru menggunakan pintasan ini

masukkan deskripsi gambar di sini

Solusi 3:

gunakan Firefox sebagai gantinya

Timothy.Li
sumber
Menggunakan Firefox membantu saya
Vineeth Subbaraya
5
  1. Instal http-server, menjalankan perintah npm install http-server -g
  2. Buka terminal di jalur di mana index.html berada
  3. Jalankan perintah http-server . -o
  4. Bersenang senang lah!
Michael Horta Fleitas
sumber
4

Saya akan menambahkan bahwa orang juga dapat menggunakan xampp, jenis mamp hal dan meletakkan proyek Anda di folder htdocs sehingga dapat diakses di localhost

latihan peluru
sumber
2

Jika Anda sudah menjalankan server, jangan lupa untuk menggunakan http: // di panggilan API. Ini dapat menyebabkan masalah serius.

Edison D'souza
sumber
Terima kasih kawan, dua jam mencari solusi untuk masalah yang sama dan apakah ini ...
Santi Nunez
Selamat datang kawan Selamat Coding :)
Edison D'souza
1

Alasannya

Anda tidak membuka halaman melalui server, seperti Apache, jadi ketika browser mencoba untuk mendapatkan sumber daya itu berpikir itu berasal dari domain terpisah, yang tidak diperbolehkan. Meskipun beberapa browser mengizinkannya.

Solusinya

Jalankan inetmgr dan host halaman Anda secara lokal dan telusuri sebagai http: // localhost: portnumber / PageName.html atau melalui server web seperti Apache, nginx, node dll.

Atau gunakan browser lain. Tidak ada kesalahan yang ditampilkan saat membuka halaman langsung menggunakan Firefox dan Safari. Itu hanya untuk Chrome dan IE (xx).

Jika Anda menggunakan editor kode seperti Bracket, Sublime atau Notepad ++, aplikasi-aplikasi tersebut menangani kesalahan ini secara otomatis.

Virendra Shenvi Velingkar
sumber
1

Masalah ini tidak terjadi di Firefox dan Safari. Pastikan Anda menggunakan versi terbaru xml2json.js. Karena saya menghadapi kesalahan parser XML di IE. Cara terbaik Chrome Anda harus membukanya di server seperti Apache atau XAMPP.

Shantha Moorthy K
sumber
1

ada ekstensi chrome 200ok itu server web untuk chrome hanya menambahkan itu dan pilih folder Anda

gaurav moolani
sumber
Solusi luar biasa
Mohamed Adel
0

Anda harus membuka chrome menggunakan flag berikut Pergi untuk menjalankan menu dan ketik "chrome --disable-web-security --user-data-dir"

Pastikan semua instance chrome ditutup sebelum Anda menggunakan flag untuk membuka chrome. Anda akan mendapatkan peringatan keamanan yang menunjukkan CORS diaktifkan.

Manas
sumber
0

Menambahkan ke @Kirill Fuchs solusi luar biasa dan menjawab keraguan @ StackUser - saat memulai http-server, setel path sampai folder aplikasi saja, BUKAN sampai halaman html! http-server C:\location\to\appdan akses di index.htmlbawah appfolder

Tejaswini
sumber
0

Arahkan ke C: /user/project/index.html, buka dengan Visual Studio 2017, File> View in Browser atau tekan Ctrl + Shift + W

etoricky
sumber
-1

Saya memiliki masalah yang sama. setelah menambahkan kode di bawah ini ke file app.js saya diperbaiki.

var cors = require('cors')
app.use(cors());
Surendra Parchuru
sumber