Pregunta No se puede abrir el archivo local - Chrome: no se permite cargar el recurso local


Navegador de prueba: Versión de Chrome: 52.0.2743.116

Es un javascript simple que es abrir un archivo de imagen de local como 'C: \ 002.jpg'

function run(){

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

   window.open(URL, null);

}
run();

Aquí está mi código de muestra. https://fiddle.jshell.net/q326vLya/3/

Por favor dame cualquier sugerencia adecuada.


32
2017-08-17 22:31


origen


Respuestas:


Sepa que esto es viejo, pero vea muchas preguntas como esta ...

Usamos mucho Chrome en el aula y es imprescindible trabajar con archivos locales.

Lo que hemos estado usando es "Servidor web para Chrome". Lo inicias, eliges la carpeta con la que deseas trabajar y vas a la URL (como 127.0.0.1:port que eliges)

Es un servidor simple y no puede usar PHP, pero para un trabajo simple, podría ser su solución:

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


16
2017-09-29 02:39



Chrome bloquea específicamente el acceso local a archivos de esta manera por razones de seguridad.

Aquí hay un artículo para solucionar la bandera en Chrome (y abre tu sistema a las vulnerabilidades):

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


8
2017-08-17 22:40



Bien amigos, entiendo completamente las razones de seguridad detrás de este mensaje de error, pero a veces, necesitamos una solución alternativa ... y aquí está el mío. Utiliza ASP.Net (en lugar de JavaScript, en el que se basó esta pregunta) pero con suerte será útil para alguien.

Nuestra aplicación interna tiene una página web donde los usuarios pueden crear una lista de accesos directos a archivos útiles distribuidos por toda nuestra red. Cuando hacen clic en uno de estos accesos directos, queremos abrir estos archivos ... pero, por supuesto, el error de Chrome impide esto.

enter image description here

Esta página web utiliza AngularJS 1.x para enumerar los diversos accesos directos.

Originalmente, mi página web intentaba crear directamente un <a href..> elemento que apunta a los archivos, pero esto produjo el "Not allowed to load local resource"error cuando un usuario hizo clic en uno de estos enlaces.

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

La solución fue reemplazar esos <a href..> elementos con este código, para llamar a una función en mi controlador angular ...

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

La función en sí es muy simple ...

$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);
}

Y en mi proyecto ASP.Net, agregué un archivo Handler llamado DownloadExternalFile.aspx que contenía este código:

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;
            }
        }
    }

Y eso es.

Ahora, cuando un usuario hace clic en uno de mis enlaces de Acceso directo, llama al OpenAnExternalFile función, que abre este archivo .ashx, pasándole la ruta + nombre del archivo que queremos abrir.

Este código de Handler carga el archivo, y luego devuelve su contenido a la respuesta HTTP.

Y, hecho el trabajo, la página web abre el archivo externo.

Uff! Nuevamente, hay una razón por la cual Chrome lanza esto "Not allowed to load local resources"excepción, así que piénselo con cuidado ... pero estoy publicando este código solo para demostrar que esta es una forma bastante simple de superar esta limitación.

Solo un último comentario: la pregunta original quería abrir el archivo "C:\002.jpg". Usted hipocresía hacer esto. Su sitio web se ubicará en un servidor (con su propia unidad C:) y no tendrá acceso directo a la unidad C: propia de su usuario. Así que lo mejor que puedes hacer es usar código como el mío para acceder a los archivos en algún lugar de una unidad de red.


7
2018-06-23 08:04



Hay una solución usando Servidor web para Chrome.
Estos son los pasos:

  1. Agregue la extensión a Chrome.
  2. Elige la carpeta (C: \ images) y lanzar el servidor en tu puerto deseado

Ahora acceda fácilmente a su archivo local:

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();

PD: es posible que deba seleccionar la opción Cabecera CORS de la configuración avanzada en caso de que se produzca un error de acceso cruzado de origen al error.


2
2018-02-01 10:10



No podrá cargar una parte externa del directorio del proyecto, y desde su directorio de nivel de usuario, por lo tanto, "no se puede acceder a la advertencia de recursos locales".

Pero si tuviera que colocar el archivo en una carpeta raíz de su proyecto como en myProject\Content\ y lo hizo referencia así:

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

1
2018-03-18 18:43



1) Abra su terminal y escriba

npm install -g http-server 

2) Vaya a la carpeta raíz a la que desea servirle los archivos y escriba:

http-server ./

3) Lea la salida de la terminal, algo así http://localhost:8080 aparecerá.

Todo lo que está allí se permitirá obtener. Ejemplo:

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


0
2018-06-21 19:15



Si pudiera hacer esto, representaría un gran problema de seguridad, ya que puede acceder a su sistema de archivos, y potencialmente actuar según los datos disponibles allí ... Afortunadamente, no es posible hacer lo que está tratando de hacer.

Si necesita acceder a recursos locales, puede intentar iniciar un servidor web en su máquina, y en este caso su método funcionará. Otras soluciones posibles son posibles, como actuar en la configuración de Chrome, pero siempre prefiero la forma limpia de instalar un servidor web local, tal vez en un puerto diferente (¡no, no es tan difícil!).

Ver también:


-1
2017-08-17 22:39