XMLHttpRequest dosyası yükleyemiyor. Çapraz kaynak istekleri yalnızca HTTP için desteklenir

Aşağıdaki hatayı alıyorum:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP. 

Bu sorunun daha önce cevaplandığını anlıyorum, ancak sorunuma hala bir çözüm bulamadım. chrome.exe --allow-file-access-from-filesKomut isteminden çalıştırmayı denedim ve dosyayı yerel dosya sistemine taşıdım, ancak yine de aynı hatayı alıyorum.

Herhangi bir öneriyi takdir ediyorum!

Kişisel bilgisayarınızda bir kod düzenleyicide HTML ve Javascript yazmak ve çıktıyı tarayıcınızda test etmek gibi bir şey yapıyorsanız, muhtemelen hata mesajları alacaksınız Cross Origin Requests. Tarayıcınız HTML oluşturacak ve bir sunucu kurulumuna gerek kalmadan tarayıcınızda Javascript, jQuery, angularJs çalıştıracaktır. Ancak birçok web tarayıcısı, siteler arası saldırıları izlemek üzere programlanmıştır ve istekleri engeller. Herhangi birinin sabit sürücünüzü web tarayıcınızdan okuyabilmesini istemezsiniz. Javascript'i ve jQuery ve angularJs gibi çerçeveleri çalıştıracak olan Notepad ++ kullanarak tam işlevli bir web sayfası oluşturabilirsiniz; ve her şeyi yalnızca Notepad ++ menü öğesini kullanarak test edin,RUN, LAUNCH IN FIREFOX. Bu, bir web sayfası oluşturmaya başlamanın güzel ve kolay bir yoludur, ancak düzen, css ve basit sayfa gezinmesinden daha fazlasını oluşturmaya başladığınızda, makinenizde yerel bir sunucu ayarlamanız gerekir.

İşte kullandığım bazı seçenekler.

1. Web sayfanızı Firefox'ta yerel olarak test edin, ardından ana makinenize dağıtın.
2. veya: Yerel bir sunucu çalıştırın

Firefox'ta Test Edin, Ana Makineye Dağıtın

1. Firefox şu anda sabit sürücünüzden sunulan dosyalardan Çapraz Kaynak İsteklerine izin veriyor
2. Web barındırma siteniz, manifest dosyası tarafından yapılandırılan klasörlerdeki dosyalara yönelik isteklere izin verecektir.

Yerel Sunucu Çalıştırın

• Bilgisayarınızda Apache veya Python gibi bir sunucu çalıştırın
• Python bir sunucu değil, ancak basit bir sunucu çalıştıracak

Python ile Yerel Sunucu Çalıştırın

IP adresinizi alın:

• Windows'ta: 'Komut İstemi'ni açın. Tüm Programlar, Aksesuarlar, Komut İstemi
• Ben her zaman olduğu Command Promptgibi çalıştırırım Administrator. Command PromptMenü öğesini sağ tıklayın ve şunu arayın:Run As Administrator
• Komutu yazın: ipconfigve Enter tuşuna basın.
• Şunu arayın: IPv4 Adresi. . . . . . . . 12.123.123.00
• IP adresinizi de gösterecek web siteleri var

Python'unuz yoksa, indirin ve kurun.

'Komut İstemi'ni kullanarak, web sayfası olarak hizmet etmek istediğiniz dosyaların bulunduğu klasöre gitmelisiniz.

• C: \ Root dizinine geri dönmeniz gerekirse - cd / yazın
• .html dosyanızın (veya php, vb.) olduğu klasöre ulaşmak için cd Drive: \ Folder \ Folder \ etc yazın
• Yolu kontrol edin. yazın: komut isteminde yol. Python'un bulunduğu klasörün yolunu görmelisiniz. Örneğin, python C: \ Python27 içindeyse, o adresi listelenen yollarda görmeniz gerekir.
• Python dizininin yolu yolda değilse, yolu ayarlamalısınız. yazın: yardım yolu ve Enter tuşuna basın. Yol için yardım göreceksiniz.
• Şöyle bir şey yazın: yol c: \ python27% yol%
• % yol% mevcut tüm yollarınızı korur. Tüm mevcut yollarınızı silmek istemezsiniz, sadece yeni bir yol ekleyin.
• Dosyaları sunmak istediğiniz klasörden yeni yolu oluşturun.
• Python Sunucusunu başlatın: Tür: python -m SimpleHTTPServer portBurada 'bağlantı noktası' istediğiniz bağlantı noktasının numarasıdır, örneğinpython -m SimpleHTTPServer 1337
• Bağlantı noktasını boş bırakırsanız, varsayılan olarak bağlantı noktası 8000'dir.
• Python sunucusu başarıyla başlarsa, bir mesaj göreceksiniz.

Web Uygulamanızı Yerel Olarak Çalıştırın

• Bir tarayıcı açın
• Adres satırı türünde: http://your IP address:port
• http://xxx.xxx.x.x:1337 veya http://xx.xxx.xxx.xx:8000varsayılan için
• Sunucu çalışıyorsa, tarayıcıda dosyalarınızın bir listesini göreceksiniz
• Sunmak istediğiniz dosyayı tıklayın ve görüntülenmelidir.

Daha gelişmiş çözümler

• Bir kod düzenleyici, web sunucusu ve entegre olan diğer hizmetleri kurun.

Apache, PHP, Python, SQL, Hata Ayıklayıcıları vb. Makinenize ayrı ayrı yükleyebilir ve ardından hepsinin nasıl birlikte çalışmasını sağlayacağınızı bulmak için çok zaman harcayabilir veya tüm bunları birleştiren bir çözüm arayabilirsiniz.

NetBeans IDE ile XAMPP kullanmayı seviyorum. Ayrıca, User InterfaceApache ve diğer hizmetleri yönetmek ve entegre etmek için bir sağlayan WAMP'ı da kurabilirsiniz .

Basit Çözüm

Saf html / js / css dosyalarıyla çalışıyorsanız.

Bu küçük sunucu ( bağlantı ) uygulamasını Chrome'a yükleyin . Uygulamayı açın ve dosya konumunu proje dizininize yönlendirin.

Uygulamada gösterilen url'ye gidin.

Düzenleme: Gulp kullanarak daha akıllı çözüm

Adım 1: Gulp'i kurmak için. Terminalinizde aşağıdaki komutu çalıştırın.

npm install gulp-cli -g
npm install gulp -D

Adım 2: Proje dizininizin içinde gulpfile.js adlı bir dosya oluşturun. Aşağıdaki içeriği içine kopyalayın.

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

3. Adım: Tarayıcı senkronizasyon gulp eklentisini yükleyin. Gulpfile.js'nin bulunduğu dizinin içinde aşağıdaki komutu çalıştırın

npm install browser-sync gulp --save-dev

Adım 4: Sunucuyu başlatın. Gulpfile.js'nin bulunduğu dizinin içinde aşağıdaki komutu çalıştırın

gulp serve

Bu hata, html belgelerini doğrudan tarayıcıdan açtığınız için oluyor. Bunu düzeltmek için kodunuzu bir web sunucusundan sunmanız ve yerel ana bilgisayardan ona erişmeniz gerekir. Apache kurulumunuz varsa, dosyalarınızı sunmak için bunu kullanın. JetBrains IDE'leri, Eclipse gibi bazı IDE'ler yerleşik web sunucularına sahiptir ...

Node.Js kurulumunuz varsa, http-sunucusunu kullanabilirsiniz . Sadece koşun npm install http-server -gve Kirill Fuchs gibi terminalde kullanabileceksinizhttp-server C:\location\to\app.

Alan Wells'in ayrıntılı yanıtına eklemek için burada hızlı bir düzeltme var

Yerel Sunucu Çalıştırın

Bilgisayarınızdaki herhangi bir klasörü Serve ile sunabilirsiniz

Öncelikle, hizmet etmek istediğiniz klasöre komut satırını kullanarak gidin.

Sonra

npx i -g serve
serve

veya indirerek Serve'i test etmek isterseniz

npx serve

ve bu kadar! Dosyalarınızı http: // localhost: 5000 adresinde görüntüleyebilirsiniz.

Web API projemi yerel olarak dağıtırken bu hatayla karşılaşıyordum ve yalnızca aşağıda verilen bu URL ile API projesini çağırıyordum:

localhost // myAPIProject

Hata mesajı http: // olmadığını söylediği için URL'yi değiştirdim ve aşağıda verildiği gibi bir http öneki koydum ve hata gitti.

http: // localhost // myAPIProject

Eğer kullanırsanız WebStorm JavaScript IDE , sadece tarayıcınızda WebStorm projenizi açabilirsiniz. WebStorm otomatik olarak bir sunucuyu başlatacak ve bu hataların hiçbirini artık almayacaksınız çünkü artık dosyalara izin verilen / desteklenen protokollerle (HTTP) erişiyorsunuz.

İhtiyaçlarınıza bağlıdır, ancak JSON'nuzu http://myjson.com adresine kaydederek (kukla) JSON'nuzu geçici olarak kontrol etmenin hızlı bir yolu da vardır . API bağlantısını kopyalayın ve bunu javascript kodunuza yapıştırın. Viyola! Kodları dağıtmak istediğinizde, kodlarınızdaki o url'yi değiştirmeyi unutmamalısınız!

Proje klasörünüzü Xampp dizininin htdocs içine yerleştirin Apache sunucunuzu xampp kontrol panelini kullanarak başlatın ve ardından bir tarayıcıya gidin localhost / projectfolder'ı açın ve çalışmaya başlayın