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

796

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.

corazza
sumber
23
Apakah Anda mencoba melakukan ini secara lokal?
WojtekT
11
Anda perlu menggunakan localhost, bahkan jika file lokalnya
Neil
22
Tapi itu tidak bisa lintas domain!
corazza
21
Jika Anda menggunakan Chrome, memulainya dari terminal dengan opsi --allow-file-access-from-files dapat membantu Anda.
nickiaconis
12
Ya, itu bukan benar-benar lintas domain ketika file berada di folder yang sama dengan halaman web, sekarang adalah itu ... Saya menemukan bahwa jika Anda menggunakan Firefox, bukan Chrome, masalahnya hilang.
Sphinxxx

Jawaban:

790

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.

Andreas Wong
sumber
7
Ya, saya mencoba melakukan ini menggunakan file://, tetapi saya tidak mengerti mengapa ini diizinkan. Yah, saya menginstal Lampp saya kira ...
corazza
150
Bayangkan jika itu dibolehkan dan aplikasi web di mana penulis halaman menggunakan sesuatu seperti load('file://C:/users/user/supersecret.doc')dan kemudian mengunggah konten ke server mereka menggunakan ajax dll.
Andreas Wong
11
Sayangnya, kebijakan dibuat untuk semua kasus, tidak hanya untuk Anda :(, jadi Anda harus menanggungnya
Andreas Wong
28
Ada halaman untuk topik ini di wiki GitHub: github.com/mrdoob/three.js/wiki/How-to-run-things-locally
Felipe Lima
29
Anda juga dapat menggunakan sakelar --allow-file-access-from-file di chrome. Per jawaban saya di sini: stackoverflow.com/questions/8449716/…
prauchfuss
609

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

  1. 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
Scott Stensland
sumber
3
Ini menghemat banyak waktu, terima kasih. Instal Python saya tidak memiliki modul SimpleHTTPServer tetapi instruksi simpul bekerja seperti pesona.
LukeP
3
Menanggapi komentar LukeP, dalam python 2.7 perintah tidak bekerja sesuai instruksi $ python -m SimpleHTTPServer, yang menghasilkan pesan: Serving HTTP on 0.0.0.0 port 8000 ...Jika Anda salah mengeja nama modul, mis. $ python -m SimpleHttpServerAnda akan mendapatkan pesan kesalahan No module named SimpleHttpServerAnda akan mendapatkan pesan kesalahan yang sama jika Anda memiliki python3 diinstal (v. python 2.7). Anda dapat memeriksa versi python menggunakan perintah: $ python --version. Anda juga dapat menentukan port untuk didengarkan seperti ini:$ python -m SimpleHTTPServer 3333
7stud
1
Server python menyajikan file dari direktori tempat Anda memulai server. Jadi, jika file yang ingin Anda sajikan berada di / Users / 7stud / angular_projects / 1app, kemudian jalankan server di direktori itu, misalnya $ cd ~/angular_projects/1app, lalu $ python -m SimpleHTTPServer. Di browser Anda, masukkan url http://localhost:8000/index.html. Anda juga dapat meminta file dalam subdirektori dari direktori di mana Anda memulai server, misalnyahttp://localhost:8000/subdir/hello.html
7stud
2
Saya pernah mendengar bahwa Python sederhana dan kuat, seperti bahasa "X", tetapi ini konyol! Tidak perlu menginstal XAMPP, atau mengatur server http sederhana dengan node untuk melayani file statis - Satu perintah dan boom! Terima kasih banyak, menghemat banyak waktu dan kerumitan.
RD
2
LUAR BIASA! - untuk Python di Windows gunakan: python -m http.server 8080 ... atau port apa pun yang Anda inginkan dan ketika Anda ingin berhenti hanya ctrl-c.
Kristopher
162

Di Chrome Anda dapat menggunakan bendera ini:

--allow-file-access-from-files

Baca lebih lanjut di sini.

Komunitas
sumber
11
@ Blairg23, ingatlah bahwa solusi ini mengharuskan memulai kembali semua contoh Chrome.exe agar bisa berfungsi
Alex Klaus
4
Tolong, jelaskan bagaimana cara menggunakannya di chrome.
Rishabh Agrahari
@ Praya Seharusnya tidak melakukan ini
Suraj Jain
Saya sarankan menggunakan Chromium hanya untuk debugging lokal (memulainya dengan flag --allow-file-access-from-files). Ini berarti menggunakan Chrome untuk penelusuran web umum, dan menggunakan Chromium sebagai aplikasi default untuk file HTML.
Alan Zhiliang Feng
Perhatikan bahwa fetch()masih menyangkal hal ini. Anda harus menggunakan XMLHttpRequestbeberapa cara
Hashbrown
63

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.

James Harrington
sumber
41

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.

Finn
sumber
5
+1 untuk Web Server for Chrometautan aplikasi - sejauh ini merupakan solusi paling sederhana & paling bersih untuk pengaturan httpd sementara untuk Chrome IMO
Itu menyelamatkan saya. Solusi tepat
Surya
18

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.

CommonsWare
sumber
Cemerlang! Kami baru saja akan menulis ulang metode untuk menyuntikkan JSON ke dalam variabel .. tetapi ini berhasil! webView.getSettings (). setAllowFileAccessFromFileURLs (true);
WallyHale
15

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

kesalahan :localhost:8080

solusi :http://localhost:8080

KARTHIKEYAN.A
sumber
14

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
Ridha Rezzag
sumber
13

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.
BlackBeard
sumber
12

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.

bryc
sumber
Jika Anda menginstal php atau telah menginstal, Anda dapat memulai server di folder Anda: php.net/manual/es/features.commandline.webserver.php
jechaviz
12

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

PS Anehnya, IntenetExplorer_Edge bekerja dengan sangat baik !!!

Yash P Shah
sumber
1
tidak lagi. firefox dan ie keduanya memblokir permintaan kors untuk saya.
Baahubali
juga itu tidak seperti hal yang baik untuk mengakses halaman tidak aman: D
csomakk
6

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 :)

Ömürcan Cengiz
sumber
4

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 .

aku
sumber
4

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
Deniss M.
sumber
4

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.

TarmoPikaro
sumber
3

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.

Enayat
sumber
1

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/

YUIOP QWERT
sumber
1

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

Naga Sai A
sumber
1

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! 😎 💁🏻 🙊 🙏🏾

Alex Gray
sumber
1
  • 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
  • Daftar barang

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

Fred Ondieki
sumber
1

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.

Sujith S
sumber
jawaban rangkap
Scott Stensland
0

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;

mgilberties
sumber
0

Untuk pengguna Linux Python:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)
Daniel Braun
sumber
Apakah tidak ada alasan mengapa google-chrome --allow-file-access-from-files <url>tidak bekerja dan lebih ringkas?
agupta231
@ agupta231 Modul webbrowser memiliki argumen yang memungkinkan Anda berbagai jenis "pembukaan" misalnya. buka di tab saat ini, tab baru, jendela baru dll.
Daniel Braun
0

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'))
  1. 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 .

noamyg
sumber
-1

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.

pengguna1462586
sumber
-1

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

aphoe
sumber