"Permintaan asal silang hanya didukung untuk HTTP." kesalahan saat memuat file lokal

Saya mencoba memuat model 3D ke Three.js JSONLoader, dan model 3D itu berada di direktori yang sama dengan seluruh situs web.

Saya mendapatkan "Cross origin requests are only supported for HTTP."kesalahan, tetapi saya tidak tahu apa penyebabnya dan bagaimana cara memperbaikinya.

Bola kristal saya mengatakan bahwa Anda memuat model menggunakan salah satu file://atau C:/, yang tetap setia pada pesan kesalahan karena tidakhttp://

Jadi Anda dapat menginstal server web di PC lokal Anda atau mengunggah model di tempat lain dan menggunakan jsonpdan mengubah url kehttp://example.com/path/to/model

Asal didefinisikan dalam RFC-6454 sebagai

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

Jadi meskipun file Anda berasal dari host yang sama ( localhost), tetapi asalkan skemanya berbeda ( http/ file), mereka diperlakukan sebagai asal yang berbeda.

Sekadar eksplisit - Ya, kesalahannya adalah Anda tidak dapat mengarahkan browser Anda secara langsung file://some/path/some.html

Berikut adalah beberapa opsi untuk memutar server web lokal dengan cepat agar browser Anda membuat file lokal

Python 2

Jika Anda memasang Python ...

1. Ubah direktori menjadi folder tempat file some.htmlatau file Anda ada menggunakan perintahcd /path/to/your/folder

2. Mulai server web Python menggunakan perintah python -m SimpleHTTPServer

Ini akan memulai server web untuk menampung seluruh daftar direktori Anda di http://localhost:8000

3. Anda dapat menggunakan port khusus yang python -m SimpleHTTPServer 9000memberi Anda tautan:http://localhost:9000

Pendekatan ini dibangun untuk setiap instalasi Python.

Python 3

Lakukan langkah yang sama, tetapi gunakan perintah berikut sebagai gantinya python3 -m http.server

Node.js

Atau, jika Anda menuntut pengaturan yang lebih responsif dan sudah menggunakan nodejs ...

1. Instal http-serverdengan mengetiknpm install -g http-server

2. Ubah ke direktori kerja Anda, tempat some.htmltinggal Anda

3. Mulai server http Anda dengan menerbitkan http-server -c-1

Ini memutar Node.js httpd yang menyajikan file dalam direktori Anda sebagai file statis yang dapat diakses http://localhost:8080

Rubi

Jika bahasa pilihan Anda adalah Ruby ... para Dewa Ruby mengatakan ini juga berfungsi:

ruby -run -e httpd . -p 8080

PHP

Tentu saja PHP juga memiliki solusinya.

php -S localhost:8000

Di Chrome Anda dapat menggunakan bendera ini:

--allow-file-access-from-files

Baca lebih lanjut di sini.

Berlari ke hari ini.

Saya menulis beberapa kode yang terlihat seperti ini:

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

... tapi seharusnya terlihat seperti ini:

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

Satu-satunya perbedaan adalah kurangnya http://potongan kode kedua.

Hanya ingin menempatkan itu di luar sana kalau-kalau ada orang lain dengan masalah yang sama.

Ubah saja url ke http://localhostalih-alih localhost. Jika Anda membuka file html dari lokal, Anda harus membuat server lokal untuk melayani file html itu, cara paling sederhana adalah menggunakan Web Server for Chrome. Itu akan memperbaiki masalah.

Dalam aplikasi Android - misalnya, untuk memungkinkan JavaScript memiliki akses ke aset melalui file:///android_asset/- gunakan setAllowFileAccessFromFileURLs(true)pada apa WebSettingsyang Anda dapatkan dari menelepon getSettings()di Internet WebView.

Gunakan http://atau https://untuk membuat url

kesalahan :localhost:8080

solusi :http://localhost:8080

Cara tercepat untuk saya adalah: untuk pengguna windows menjalankan file Anda pada masalah Firefox diselesaikan, atau jika Anda ingin menggunakan cara termudah chrome bagi saya adalah menginstal Python 3 kemudian dari command prompt jalankan perintah python -m http.server kemudian pergi ke http: // localhost: 8000 / lalu arahkan ke file Anda

python -m http.server

Saya akan mencantumkan 3 pendekatan berbeda untuk menyelesaikan masalah ini:

1. Menggunakan npmpaket yang sangat ringan : Instal live-server menggunakan npm install -g live-server. Kemudian, buka direktori itu buka terminal dan ketik live-serverdan tekan enter, halaman akan disajikan di localhost:8080. BONUS: Ini juga mendukung reload panas secara default.
2. Menggunakan aplikasi Google Chrome yang ringan yang dikembangkan oleh Google : Instal aplikasi lalu, buka tab aplikasi di Chrome dan buka aplikasi. Pada titik aplikasi itu ke folder kanan. Halaman Anda akan dilayani!
3. Mengubah pintasan Chrome di windows : Buat pintasan browser Chrome. Klik kanan pada ikon dan buka properti. Di properti, edit targetke "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"dan simpan. Kemudian gunakan Chrome buka halaman menggunakan ctrl+o. CATATAN: JANGAN gunakan jalan pintas ini untuk browsing biasa.

Bagi mereka yang menggunakan Windows tanpa Python atau Node.js, masih ada solusi ringan: Mongoose .

Yang Anda lakukan adalah menyeret executable ke mana pun root server seharusnya, dan jalankan. Ikon akan muncul di bilah tugas dan itu akan menavigasi ke server di browser default.

Juga, Z-WAMP adalah WAMP portabel 100% yang berjalan dalam satu folder, sangat mengagumkan. Itu pilihan jika Anda memerlukan PHP dan server MySQL yang cepat.

Jika Anda menggunakan Mozilla Firefox, Ini akan berfungsi seperti yang diharapkan tanpa masalah;

PS Anehnya, IntenetExplorer_Edge bekerja dengan sangat baik !!!

Solusi mudah untuk siapa yang menggunakan Kode VS

Saya telah mendapatkan kesalahan ini untuk sementara waktu. Sebagian besar jawabannya berhasil. Tetapi saya menemukan solusi yang berbeda. Jika Anda tidak ingin berurusan dengan node.jsatau solusi lain di sini dan Anda bekerja dengan file HTML (memanggil fungsi dari file js lain atau mengambil json api) cobalah menggunakan Live Server ekstensi .

Ini memungkinkan Anda untuk membuka server langsung dengan mudah. Dan karena itu menciptakan localhostserver, masalahnya teratasi. Anda cukup memulai localhostdengan membuka file HTML dan klik kanan pada editor dan klikOpen with Live Server .

Pada dasarnya memuat file menggunakan http://localhost/index.htmlbukan menggunakan file://....

EDIT

Tidak perlu memiliki .htmlfile. Anda dapat memulai Server Langsung dengan pintasan.

Tekan (alt+L, alt+O)untuk Membuka Server dan (alt+L, alt+C)untuk Menghentikan server. [Di MAC, cmd+L, cmd+Odan cmd+L, cmd+C]

Semoga ini bisa membantu seseorang :)

Saya mendapatkan kesalahan ini saat memuat file HTML di browser yang menggunakan file json dari direktori lokal. Dalam kasus saya, saya dapat menyelesaikan ini dengan membuat server simpul sederhana yang memungkinkan server konten statis. Saya meninggalkan kode untuk ini di jawaban lain ini .

Saya sarankan Anda menggunakan mini-server untuk menjalankan aplikasi semacam ini di localhost (jika Anda tidak menggunakan server inbuilt).

Inilah salah satu yang sangat mudah untuk diatur dan dijalankan:

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

Saya menduga itu sudah disebutkan dalam beberapa jawaban, tapi saya akan sedikit memodifikasi ini untuk mendapatkan jawaban yang lengkap (lebih mudah ditemukan dan digunakan).

1. Pergi ke: https://nodejs.org/en/download/ . Instal nodejs.

2. Instal http-server dengan menjalankan perintah dari command prompt npm install -g http-server.

3. Ubah ke direktori kerja Anda, di mana index.html/ yoursome.htmlberada.

4. Mulai server http Anda dengan menjalankan perintah http-server -c-1

Buka browser web ke http://localhost:8080 atau http://localhost:8080/yoursome.html - tergantung pada nama file html Anda.

Itu hanya mengatakan bahwa aplikasi harus dijalankan di server web. Saya memiliki masalah yang sama dengan chrome, saya mulai kucing jantan dan memindahkan aplikasi saya di sana, dan itu berhasil.

er. Saya baru saja menemukan beberapa kata resmi "Mencoba memuat unbuilt, modul AMD jarak jauh yang menggunakan plugin dojo / teks akan gagal karena pembatasan keamanan lintas-asal. (Versi dibangun dari modul AMD tidak terpengaruh karena panggilan ke dojo / teks dihilangkan oleh sistem build.) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

Salah satu cara kerjanya memuat file lokal adalah menggunakannya di dalam folder proyek alih-alih di luar folder proyek Anda. Buat satu folder di bawah file contoh proyek Anda mirip dengan cara kami membuat untuk gambar dan ganti bagian di mana menggunakan path lokal lengkap selain path proyek dan gunakan url relatif file di bawah folder proyek. Ini berhasil untuk saya

Untuk semua yang Anda aktifkan MacOS... siapkan LaunchAgent sederhana untuk mengaktifkan kapabilitas glamor ini di salinan Chrome Anda sendiri ...

Simpan plist, beri nama apa pun ( launch.chrome.dev.mode.plist, misalnya) ~/Library/LaunchAgentsdengan konten yang mirip dengan ...

<?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>

Itu harus diluncurkan saat startup .. tetapi Anda dapat memaksanya untuk melakukannya kapan saja dengan perintah terminal

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

TADA! 😎 💁🏻 🙊 🙏🏾

• Instal server web lokal untuk java misalnya Tomcat, untuk php Anda dapat menggunakan lampu dll
• Letakkan file json di direktori server aplikasi yang dapat diakses publik

• 

• Mulai server aplikasi, dan Anda harus dapat mengakses file dari localhost

Tidak mungkin memuat file lokal statis (mis: svg) tanpa server. Jika Anda memiliki NPM / BENANG diinstal di mesin Anda, Anda dapat mengatur server http sederhana menggunakan " http-server "

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

Atau buka terminal di folder proyek itu dan ketik "hs". Ini akan secara otomatis memulai server HTTP live.

Banyak masalah untuk ini, dengan masalah saya hilang '/' contoh: jquery-1.10.2.js: 8720 XMLHttpRequest tidak dapat memuat http: // localhost: xxxProduct / getList_tagLabels / Ini harus: http: // localhost: xxx / Product / getList_tagLabels /

Saya harap bantuan ini untuk yang memenuhi masalah ini.

Saya juga dapat membuat kembali pesan kesalahan ini ketika menggunakan tag anchor dengan href berikut:

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

Dalam kasus saya, sebuah tag digunakan untuk mendapatkan 'Kursor Pointer' dan acara tersebut sebenarnya dikendalikan oleh beberapa jQuery pada acara klik. Saya menghapus href dan menambahkan kelas yang berlaku:

cursor:pointer;

Untuk pengguna Linux Python:

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

Jika Anda bersikeras menjalankan .htmlfile secara lokal dan tidak menyajikannya dengan server web, Anda dapat mencegah permintaan lintas asal itu terjadi di tempat pertama dengan membuat sumber daya yang bermasalah tersedia secara inline.

Saya punya masalah ini ketika mencoba melayani .jsfile melalui file://. Solusi saya adalah memperbarui skrip build saya untuk mengganti <script src="...">tag <script>...</script>. Ini agulp pendekatan untuk melakukan itu:

1. lari npm install --save-devke paket gulp, gulp-inlinedandel .

2. Setelah membuat gulpfile.jske direktori root, tambahkan kode berikut (cukup ubah jalur file untuk apa pun yang cocok untuk Anda):

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. Jalankan gulp bundle-for-localatau perbarui skrip build Anda untuk menjalankannya secara otomatis.

Anda dapat melihat masalah dan solusi terperinci untuk kasus saya di sini .

Cordova mencapai ini. Saya masih tidak tahu bagaimana cordova melakukannya. Bahkan tidak melalui shouldInterceptRequest.

Kemudian saya menemukan bahwa kunci untuk memuat file apa pun dari lokal adalah: myWebView.getSettings (). SetAllowUniversalAccessFromFileURLs (true);

Dan ketika Anda ingin mengakses sumber daya http apa pun, tampilan web akan melakukan pengecekan dengan metode OPSI, yang Anda dapat memberikan akses melalui WebViewClient.shouldInterceptRequest dengan mengembalikan respons, dan untuk metode GET / POST berikut, Anda bisa mengembalikan nol.

pertama tutup semua instance dari chrome.

setelah itu ikuti ini.

Saya menggunakan perintah ini di mac.

"/ Aplikasi / Google Chrome.app/Contents/MacOS/Google Chrome" --allow-file-access-from-file

Untuk windows:

Bagaimana cara meluncurkan html menggunakan Chrome pada mode "--allow-file-access-from-file"?

Mengalami hal ini ketika saya mengunduh halaman untuk tampilan offline.

Saya hanya harus menghapus atribut integrity="*****"dan crossorigin="anonymous"dari semua <link>dan <script>tag