"Çapraz kaynak istekleri yalnızca HTTP için desteklenir." yerel dosya yüklenirken hata oluştu

Three.js ile bir 3D model yüklemeye çalışıyorum JSONLoaderve bu 3D model tüm web sitesi ile aynı dizinde.

Ben alıyorum "Cross origin requests are only supported for HTTP."hata, ancak bunu neden ne de nasıl bunu düzeltmek için ne bilmiyorum.

Benim kristal top ya kullanılarak modeli yüklendiğini tespit söylüyor file://ya C:/onlar değil gibi hata mesajının sadık kalır ki,http://

Böylece yerel PC'nize bir web sunucusu yükleyebilir veya modeli başka bir yere yükleyebilir jsonpve URL'yihttp://example.com/path/to/model

Kökeni tanımlanır RFC 6454 olarak

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

Dosyanız aynı ana bilgisayardan ( localhost) gelse de, şema farklı olduğu sürece ( http/ file), farklı kaynak olarak değerlendirilirler.

Sadece açık olmak gerekirse - Evet, hata tarayıcınızı doğrudan adresine yönlendiremeyeceğinizi söylüyor file://some/path/some.html

Tarayıcınızın yerel dosyaları oluşturmasına izin vermek için yerel bir web sunucusunu hızla döndürmek için bazı seçenekler

Python 2

Yüklü Python'unuz varsa ...

1. Dizini some.html, komutunuzu kullanarak dosya veya dosyalarınızın bulunduğu klasöre değiştirincd /path/to/your/folder

2. Komutunu kullanarak bir Python web sunucusu başlatın python -m SimpleHTTPServer

Bu işlem, dizin listenizin tamamını barındırmak için bir web sunucusu başlatacak http://localhost:8000

3. Size bağlantı python -m SimpleHTTPServer 9000sağlayan özel bir bağlantı noktası kullanabilirsiniz :http://localhost:9000

Bu yaklaşım herhangi bir Python kurulumunda yerleşiktir.

Python 3

Aynı adımları uygulayın, ancak bunun yerine aşağıdaki komutu kullanın python3 -m http.server

node.js

Alternatif olarak, daha duyarlı bir kurulum talep ediyorsanız ve zaten nodejs kullanıyorsanız ...

1. http-serverYazarak yüklenpm install -g http-server

2. some.htmlYaşamlarınızın olduğu çalışma dizininize geçin

3. Http sunucunuzu düzenleyerek başlatın http-server -c-1

Bu, dizininizdeki dosyaları erişilebilen statik dosyalar olarak sunan bir Node.js httpd döndürür http://localhost:8080

Yakut

Tercih ettiğiniz dil Ruby ise ... Ruby Gods bunun da işe yaradığını söylüyor:

ruby -run -e httpd . -p 8080

PHP

Elbette PHP'nin de bir çözümü var.

php -S localhost:8000

Chrome'da şu bayrağı kullanabilirsiniz:

--allow-file-access-from-files

Daha fazlasını buradan okuyun.

Bugün buna koştum.

Ben böyle görünüyordu bazı kod yazdı:

app.controller('ctrlr', function($scope, $http){
    $http.get('localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

... ama şöyle görünmeliydi:

app.controller('ctrlr', function($scope, $http){
    $http.get('http://localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

Tek fark, http://ikinci kod pasajındaki eksiklikti .

Sadece benzer bir sorunu olan başkaları varsa bunu ortaya koymak istedim.

Bunun http://localhostyerine URL'yi değiştirin localhost. Html dosyasını yerelden açarsanız, bu html dosyasını sunmak için en basit yolu kullanmak üzere bir yerel sunucu oluşturmanız gerekir Web Server for Chrome. Bu sorunu çözecektir.

Bir Android uygulamasında - örneğin, JavaScript aracılığıyla varlıklara erişmesini sağlamak için file:///android_asset/kullanımı - setAllowFileAccessFromFileURLs(true)üzerine WebSettingsaradığınız aldığım o getSettings()üzerinde WebView.

URL oluşturmak için http://veya https://düğmesini kullanın

hata :localhost:8080

çözüm :http://localhost:8080

benim için en hızlı yolu: Windows kullanıcıları için dosya Firefox problem çözüldü çalıştırmak, ya da benim için krom en kolay yolu kullanmak istiyorsanız Python 3 yüklemek sonra komut istemi run komut python -m http.server sonra http: // localhost: 8000 / sonra dosyalarına git

python -m http.server

Bu sorunu çözmek için 3 farklı yaklaşım listeleyeceğim :

1. Çok hafif bir npmpaket kullanma : Canlı sunucuyu kullanarak yükleyin npm install -g live-server. Sonra, o dizine gidin terminali açın live-serverve enter ve enter tuşuna basın, sayfa hizmet edilecektir localhost:8080. BONUS: Varsayılan olarak sıcak yüklemeyi de destekler.
2. Google tarafından geliştirilen hafif bir Google Chrome uygulamasını kullanarak : Uygulamayı yükleyin, ardından Chrome'daki uygulamalar sekmesine gidin ve uygulamayı açın. Uygulamada doğru klasöre gelin. Sayfanıza sunulacak!
3. Windows'da Chrome kısayolunu değiştirme : Bir Chrome tarayıcı kısayolu oluşturun. Simgeye sağ tıklayın ve özellikleri açın. Özelliklerde, düzenleme targetyapın "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"ve kaydedin. Ardından Chrome'u kullanarak sayfayı kullanarak açın ctrl+o. NOT: Bu kısayolu normal tarama için KULLANMAYIN .

Python veya Node.js içermeyen Windows'ta hala hafif bir çözüm var: Mongoose .

Tek yapmanız gereken, yürütülebilir dosyayı sunucunun kökünün olduğu yere sürükleyip çalıştırmaktır. Görev çubuğunda bir simge belirecek ve varsayılan tarayıcıda sunucuya gidecektir.

Ayrıca, Z-WAMP , tek bir klasörde çalışan% 100 taşınabilir bir WAMP, harika. Hızlı bir PHP ve MySQL sunucusuna ihtiyacınız varsa bu bir seçenektir.

Mozilla Firefox kullanıyorsanız, beklendiği gibi sorunsuz çalışacaktır;

PS Şaşırtıcı, IntenetExplorer_Edge kesinlikle iyi çalışıyor !!!

VS Kodu kullananlara kolay çözüm

Bir süredir bu hatayı alıyorum. Cevapların çoğu işe yarıyor. Ama farklı bir çözüm buldum. node.jsBurada veya başka bir çözümle uğraşmak istemiyorsanız ve bir HTML dosyasıyla çalışıyorsanız (başka bir js dosyasından işlevleri çağırmak veya json api'yi getirmek) Live Server uzantısını kullanmayı deneyin .

Canlı bir sunucuyu kolayca açmanızı sağlar. Ve localhostsunucu oluşturduğu için sorun çözülüyor. localhostHTML dosyasını açarak başlatabilir ve düzenleyiciyi sağ tıklayıp tıklayabilirsiniz Open with Live Server.

Temelde dosyaları kullanmak http://localhost/index.htmlyerine kullanarak yükler file://....

DÜZENLE

Bir .htmldosyaya gerek yoktur. Canlı Sunucuyu kısayollarla başlatabilirsiniz.

Hit (alt+L, alt+O)Açık Sunucu ve (alt+L, alt+C)sunucuya Durağı'na. [MAC'de cmd+L, cmd+Ove cmd+L, cmd+C]

Birisine yardımcı olacağını umuyoruz :)

Yerel dizinden bir json dosyası kullanan tarayıcıya bir HTML dosyası yüklerken bu tam hatayı alıyordum. Benim durumumda, statik içeriği sunucuya izin veren basit bir düğüm sunucusu oluşturarak bunu çözebildim. Kodunu bu diğer cevapta bıraktım .

Bu tür uygulamaları localhost üzerinde çalıştırmak için bir mini sunucu kullanmanızı öneririm (eğer dahili bir sunucu kullanmıyorsanız).

Kurulumu ve çalıştırması çok basit olan:

https://www.npmjs.com/package/tiny-server

Bazı cevaplarda zaten belirtildiğinden şüpheleniyorum, ancak tam bir çalışma cevabı (bulmak ve kullanmak daha kolay) için biraz değiştireceğim.

1. : Git https://nodejs.org/en/download/ . Düğümleri yükleyin.

2. Komut isteminden komut çalıştırarak http sunucusunu yükleyin npm install -g http-server.

3. Çalışma dizininize değiştirin index.html/ burada yoursome.htmlbulunur.

4. Komutu çalıştırarak http sunucunuzu başlatın http-server -c-1

Html dosya adınıza bağlı olarak http://localhost:8080 veya web tarayıcısını açın http://localhost:8080/yoursome.html.

Basitçe, uygulamanın bir web sunucusunda çalıştırılması gerektiğini söylüyor. Krom ile aynı sorunu yaşadım, tomcat'a başladım ve başvurumu oraya taşıdım ve işe yaradı.

er. Bazı resmi kelimeler buldum "Dojo / metin eklentisini kullanan yerleşik olmayan uzak AMD modülleri çapraz kökenli güvenlik kısıtlamaları nedeniyle başarısız olacaktır. yapı sistemi.) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

Yerel dosyaları yüklemenin bir yolu da onları proje klasörünüzün dışında proje klasöründe kullanmaktır. Proje örnek dosyalarınızın altında, görüntüler için oluşturma şeklimize benzer bir klasör oluşturun ve proje yolu dışında tam yerel yolun kullanıldığı bölümü değiştirin ve proje klasörü altında göreli dosya URL'si kullanın. Benim için çalıştı

Hepiniz için MacOS... kendi Chrome kopyanızda bu göz alıcı yetenekleri etkinleştirmek için basit bir LaunchAgent kurun ...

Bir kaydetme plist, adında ne olursa olsun ( launch.chrome.dev.mode.plistörneğin,) ~/Library/LaunchAgentsbenzer içeriğe sahip ...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>launch.chrome.dev.mode</string>
    <key>ProgramArguments</key>
    <array>
        <string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
        <string>-allow-file-access-from-files</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>

O gerektiğini açıldığında başlayacak .. ama terminali komutla herhangi bir zamanda bunu yapmak için zorlayabilirsiniz

launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist

Tada!😎 💁🏻 🙊 🙏🏾 Instagram Hesabındaki Resim ve Videoları

• Tomcat için java için yerel web sunucusu yükleyin, php için lamba vb.
• Json dosyasını genel erişilebilir uygulama sunucusu dizinine bırakın

• 

• Uygulama sunucusunu başlatın ve dosyaya localhost'tan erişebilmelisiniz

Sunucu olmadan statik yerel dosyalar (örn: svg) yüklenemez. Makinenizde NPM / YARN yüklüyse, " http-server " kullanarak basit http sunucusu kurabilirsiniz

npm install http-server -g
http-server [path] [options]

Veya bu proje klasöründe terminali açın ve "hs" yazın. Otomatik olarak HTTP canlı sunucusunu başlatır.

Bunun için birçok sorun var, benim sorunum eksik '/' örnek: jquery-1.10.2.js: 8720 XMLHttpRequest http: // localhost: xxxProduct / getList_tagLabels / Olmalı : http: // localhost: xxx / Product / getList_tagLabels /

Umarım bu problemi kimin karşıladığı için bu yardım.

Ayrıca aşağıdaki href ile bir bağlantı etiketi kullanırken bu hata iletisini yeniden oluşturmak mümkün:

<a href="javascript:">Example a tag</a>

Benim durumumda bir etiket 'İşaretçi İmleç' almak için kullanılıyordu ve olay aslında bazı jQuery on click olayı tarafından kontrol edildi. Href kaldırıldı ve geçerli bir sınıf ekledi:

cursor:pointer;

Linux Python kullanıcıları için:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)

.htmlDosyayı yerel olarak çalıştırmakta ve bir web sunucusu ile sunmama konusunda ısrar ediyorsanız , sorunlu kaynakları yerinde sunarak bu çapraz kaynak taleplerinin ilk sırada olmasını önleyebilirsiniz.

.jsDosyaları üzerinden sunmaya çalışırken bu sorunu yaşadım file://. Çözümüm, <script src="...">etiketleri değiştirmek için yapı komut dosyamı güncellemekti <script>...</script>. İşte gulpbunu yapmak için bir yaklaşım:

1. çalıştırmak npm install --save-devpaketlere gulp, gulp-inlineve del.

2. gulpfile.jsKök dizine bir oluşturduktan sonra , aşağıdaki kodu ekleyin (sadece size uygun olanın dosya yollarını değiştirin):

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))

3. gulp bundle-for-localDerleme betiğinizi otomatik olarak çalıştırmak için çalıştırın veya güncelleyin.

Benim durumum için ayrıntılı sorunu ve çözümü burada görebilirsiniz .

cordova bunu başarır. Hala cordova'nın nasıl yaptığını anlayamıyorum. ShouldInterceptRequest bile geçmez.

Daha sonra yerelden herhangi bir dosyayı yüklemek için anahtar olduğunu öğrendim: myWebView.getSettings (). SetAllowUniversalAccessFromFileURLs (true);

Herhangi bir http kaynağına erişmek istediğinizde, web görünümü, bir yanıt döndürerek WebViewClient.shouldInterceptRequest aracılığıyla erişim verebileceğiniz OPTIONS yöntemiyle denetleme yapar ve aşağıdaki GET / POST yöntemi için null değerini döndürebilirsiniz.

önce kromun tüm örneğini kapatın.

bundan sonra bunu takip edin.

Mac'te bu komutu kullandım.

"/ Uygulamalar / Google Chrome.app/Contents/MacOS/Google Chrome" - dosyalardan allow dosyaya erişim

Pencereler için:

"--Allow dosyalarından dosyalara erişim" modunda Chrome'u kullanarak html nasıl başlatılır?

Çevrimdışı görüntüleme için bir sayfa indirdiğimde bunu yaşadım.

Tüm ve etiketlerinden integrity="*****"ve crossorigin="anonymous"niteliklerini kaldırmak zorunda kaldım<link><script>