Pertanyaan Tidak dapat membuka file lokal - Chrome: Tidak diizinkan memuat sumber daya lokal


Peramban uji: Versi Chrome: 52.0.2743.116

Ini adalah javascript sederhana yaitu membuka file gambar dari lokal seperti 'C: \ 002.jpg'

function run(){

   var URL = "file:///C:\002.jpg";

   window.open(URL, null);

}
run();

Berikut ini contoh kode saya. https://fiddle.jshell.net/q326vLya/3/

Tolong beri saya saran yang cocok.


32
2017-08-17 22:31


asal


Jawaban:


Ketahuilah ini sudah tua, tapi lihat banyak pertanyaan seperti ini ...

Kami menggunakan Chrome banyak di kelas dan itu adalah suatu keharusan untuk bekerja dengan file lokal.

Apa yang kami gunakan adalah "Web Server untuk Chrome". Anda memulainya, pilih folder yang ingin bekerja dengan dan pergi ke URL (seperti 127.0.0.1:port yang Anda pilih)

Ini adalah server sederhana dan tidak dapat menggunakan PHP tetapi untuk pekerjaan sederhana, mungkin solusi Anda:

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb


16
2017-09-29 02:39



Chrome secara khusus memblokir akses file lokal dengan cara ini demi alasan keamanan.

Berikut ini artikel untuk menyiasati bendera di Chrome (dan membuka sistem Anda hingga kerentanan):

http://www.chrome-allow-file-access-from-file.com/


8
2017-08-17 22:40



Oke, saya benar-benar memahami alasan keamanan di balik pesan kesalahan ini, tetapi terkadang, kami membutuhkan solusi ... dan inilah saya. Ini menggunakan ASP.Net (bukan JavaScript, yang pertanyaan ini didasarkan pada) tetapi itu mudah-mudahan akan berguna bagi seseorang.

Aplikasi internal kami memiliki laman web tempat pengguna dapat membuat daftar pintasan ke file yang berguna yang tersebar di seluruh jaringan kami. Saat mereka mengeklik salah satu pintasan ini, kami ingin membuka file ini ... tetapi tentu saja, kesalahan Chrome mencegah hal ini.

enter image description here

Halaman web ini menggunakan AngularJS 1.x untuk mendaftar berbagai pintasan.

Awalnya, halaman web saya mencoba untuk membuat secara langsung <a href..> elemen menunjuk pada file, tetapi ini menghasilkan "Not allowed to load local resource"kesalahan saat pengguna mengklik salah satu tautan ini.

<div ng-repeat='sc in listOfShortcuts' id="{{sc.ShtCut_ID}}" class="cssOneShortcutRecord" >
    <div class="cssShortcutIcon">
        <img ng-src="{{ GetIconName(sc.ShtCut_PathFilename); }}">
    </div>
    <div class="cssShortcutName">
        <a ng-href="{{ sc.ShtCut_PathFilename }}" ng-attr-title="{{sc.ShtCut_Tooltip}}" target="_blank" >{{ sc.ShtCut_Name }}</a>
    </div>
</div>

Solusinya adalah mengganti mereka <a href..> elemen dengan kode ini, untuk memanggil fungsi dalam kontroler Sudut saya ...

<div ng-click="OpenAnExternalFile(sc.ShtCut_PathFilename);" >
    {{ sc.ShtCut_Name }}
</div>

Fungsi itu sendiri sangat sederhana ...

$scope.OpenAnExternalFile = function (filename) {
    //
    //  Open an external file (i.e. a file which ISN'T in our IIS folder)
    //  To do this, we get an ASP.Net Handler to manually load the file, 
    //  then return it's contents in a Response.
    //
    var URL = '/Handlers/DownloadExternalFile.ashx?filename=' + encodeURIComponent(filename);
    window.open(URL);
}

Dan dalam proyek ASP.Net saya, saya menambahkan file Handler yang disebut DownloadExternalFile.aspx yang berisi kode ini:

namespace MikesProject.Handlers
{
    /// <summary>
    /// Summary description for DownloadExternalFile
    /// </summary>
    public class DownloadExternalFile : IHttpHandler
    {
        //  We can't directly open a network file using Javascript, eg
        //      window.open("\\SomeNetworkPath\ExcelFile\MikesExcelFile.xls");
        //
        //  Instead, we need to get Javascript to call this groovy helper class which loads such a file, then sends it to the stream.  
        //      window.open("/Handlers/DownloadExternalFile.ashx?filename=//SomeNetworkPath/ExcelFile/MikesExcelFile.xls");
        //
        public void ProcessRequest(HttpContext context)
        {
            string pathAndFilename = context.Request["filename"];               //  eg  "\\SomeNetworkPath\ExcelFile\MikesExcelFile.xls"
            string filename = System.IO.Path.GetFileName(pathAndFilename);      //  eg  "MikesExcelFile.xls"

            context.Response.ClearContent();

            WebClient webClient = new WebClient();
            using (Stream stream = webClient.OpenRead(pathAndFilename))
            {
                // Process image...
                byte[] data1 = new byte[stream.Length];
                stream.Read(data1, 0, data1.Length);

                context.Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}", filename));
                context.Response.BinaryWrite(data1);

                context.Response.Flush();
                context.Response.SuppressContent = true;
                context.ApplicationInstance.CompleteRequest();
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

Dan begitulah.

Sekarang, ketika seorang pengguna mengklik salah satu tautan Pintasan saya, itu memanggil OpenAnExternalFile function, yang membuka file .ashx ini, melewatkannya path + nama file dari file yang ingin kita buka.

Kode Pegangan ini memuat file, kemudian meneruskan isinya kembali ke respons HTTP.

Dan, pekerjaan selesai, halaman web membuka file eksternal.

Fiuh! Sekali lagi - ada alasan mengapa Chrome melempar ini "Not allowed to load local resources"pengecualian, jadi hati-hati dengan ini ... tapi saya posting kode ini hanya untuk menunjukkan bahwa ini adalah cara yang cukup sederhana di sekitar batasan ini.

Hanya satu komentar terakhir: pertanyaan asli ingin membuka file "C:\002.jpg". Kamu tidak bisa melakukan hal ini. Situs web Anda akan berada di satu server (dengan C: drive itu sendiri) dan tidak memiliki akses langsung ke drive C: milik Anda sendiri. Jadi yang terbaik yang dapat Anda lakukan adalah menggunakan kode seperti milik saya untuk mengakses file di suatu tempat di drive jaringan.


7
2018-06-23 08:04



Ada solusi yang digunakan Server Web untuk Chrome.
Berikut langkahnya:

  1. Tambahkan Ekstensi ke chrome.
  2. Pilih folder (C: \ images) dan meluncurkan server di port yang Anda inginkan.

Sekarang mudah mengakses file lokal Anda:

function run(){
   // 8887 is the port number you have launched your serve
   var URL = "http://127.0.0.1:8887/002.jpg";

   window.open(URL, null);

}
run();

PS: Anda mungkin perlu memilih opsi Header CORS dari pengaturan lanjutan, sehingga Anda akan menghadapi kesalahan apa pun kesalahan akses asal silang.


2
2018-02-01 10:10



Anda tidak akan dapat memuat bagian luar direktori proyek, dan dari direktori tingkat pengguna Anda maka "tidak dapat mengakses peringatan sumber daya lokal".

Tetapi jika Anda menempatkan file di folder root dari proyek Anda seperti di myProject\Content\ dan direferensikan seperti ini:

<img src="/Content/myfolder/myimage.jpg" />

1
2018-03-18 18:43



1) Buka terminal dan ketik

npm install -g http-server 

2) Buka folder akar yang Anda inginkan untuk melayani Anda file dan ketik:

http-server ./

3) Baca output terminal, sesuatu yang agak http://localhost:8080 akan muncul.

Semua yang ada di sana akan diizinkan untuk didapatkan. Contoh:

background: url('http://localhost:8080/waw.png');


0
2018-06-21 19:15



Jika Anda dapat melakukan ini, ini akan merepresentasikan masalah keamanan yang besar, karena Anda dapat mengakses sistem berkas Anda, dan berpotensi bertindak atas data yang tersedia di sana ... Untungnya tidak mungkin untuk melakukan apa yang Anda coba lakukan.

Jika Anda membutuhkan sumber daya lokal untuk diakses, Anda dapat mencoba untuk memulai server web pada mesin Anda, dan dalam hal ini metode Anda akan bekerja. Solusi lainnya mungkin, seperti bertindak pada pengaturan Chrome, tetapi saya selalu lebih suka cara yang bersih, memasang server web lokal, mungkin di port yang berbeda (tidak, itu tidak begitu sulit!).

Lihat juga:


-1
2017-08-17 22:39