javascript - supported - No se puede abrir el archivo local-Chrome: no se permite cargar recursos locales
failed to load cross origin requests are only supported for protocol schemes (10)
Navegador de prueba: Versión de Chrome: 52.0.2743.116
Es un javascript simple que abre un archivo de imagen 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.
1) Abra su terminal y escriba
npm install -g http-server
2) Vaya a la carpeta raíz en la que desea servir sus archivos y escriba:
http-server ./
3) Lea la salida del terminal, aparecerá algo
http://localhost:8080
.
Todo lo que esté allí será permitido. Ejemplo:
background: url(''http://localhost:8080/waw.png'')
;
Bien amigos, entiendo completamente las razones de seguridad detrás de este mensaje de error, pero a veces, necesitamos una solución ... y aquí está la mía. 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 lo impide.
Esta página web utiliza AngularJS 1.x para enumerar los diversos accesos directos.
Originalmente, mi página web intentaba crear directamente un elemento
<a href..>
apuntando a los archivos, pero esto produjo el error "
Not allowed to load local resource
" 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 elementos
<a href..>
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 a la función
OpenAnExternalFile
, que abre este archivo .ashx, pasándole la ruta + nombre de archivo del archivo que queremos abrir.
Este código de controlador carga el archivo y luego devuelve su contenido a la respuesta HTTP.
Y, hecho el trabajo, la página web abre el archivo externo.
Uf!
Nuevamente, hay una razón por la cual Chrome lanza esta excepción "
Not allowed to load local resources
", así que tenga cuidado con esto ... pero publico este código solo para demostrar que esta es una forma bastante simple de evitar esta limitación.
Solo un último comentario: la pregunta original quería abrir el archivo "
C:/002.jpg
".
No
puedes
hacer esto.
Su sitio web se ubicará en un servidor (con su propia unidad C:) y no tendrá acceso directo a la propia unidad C: de su usuario.
Entonces, lo mejor que puede hacer es usar código como el mío para acceder a archivos en algún lugar de una unidad de red.
Chrome bloquea específicamente el acceso a archivos locales de esta manera por razones de seguridad.
Aquí hay un artículo para solucionar el indicador en Chrome (y abrir su sistema a las vulnerabilidades):
Este problema se produce cuando estoy usando PHP como lenguaje del lado del servidor y la solución era generar una base64 encontrando mi imagen antes de enviar el resultado al cliente
$path = ''E:/pat/rwanda.png'';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = ''data:image/'' . $type . '';base64,'' . base64_encode($data);
Creo que puede darle a alguien la idea de crear su propio trabajo
Gracias
Google Chrome no permite cargar recursos locales debido a la seguridad. Chrome necesita http url. Internet Explorer y Edge permiten cargar recursos locales, pero Safari, Chrome y Firefox no permiten cargar recursos locales.
Vaya a la ubicación del archivo e inicie el servidor Python desde allí.
python -m SimpleHttpServer
luego ponga esa url en función:
function run(){
var URL = "http://172.271.1.20:8000/" /* http://0.0.0.0:8000/ or http://127.0.0.1:8000/; */
window.open(URL, null);
}
Hay una solución alternativa usando
Web Server para Chrome
.
Aquí están los pasos:
- Agregue la extensión a Chrome.
- Elija la carpeta (C: / images) e inicie el servidor en el puerto que desee.
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 de encabezado CORS de la configuración avanzada en caso de que se encuentre con algún error de error de acceso de origen cruzado.
No podrá cargar una imagen fuera del directorio del proyecto o desde un 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
{rootFolder}/Content/my-image.jpg
y lo referenciara así:
<img src="/Content/my-image.jpg" />
Sepa que esto es un poco viejo, pero vea muchas preguntas como esta ...
Usamos Chrome mucho 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 dirígete a la URL (como 127.0.0.1: puerto que elijas)
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
Si pudiera hacer esto, representará un gran problema de seguridad, ya que puede acceder a su sistema de archivos y potencialmente actuar sobre 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á. Son posibles otras soluciones, como actuar en la configuración de Chrome, pero siempre prefiero la manera limpia, instalar un servidor web local, tal vez en un puerto diferente (¡no, no es tan difícil!).
Ver también:
Solo necesita reemplazar todas las rutas de red de imagen a cadenas de bytes en una cadena HTML codificada almacenada. Para esto, requirió HtmlAgilityPack para convertir una cadena Html a un documento Html. https://www.nuget.org/packages/HtmlAgilityPack
Encuentre el código a continuación para convertir cada ruta de red src de imagen (o ruta local) en picadura de bytes. Definitivamente mostrará todas las imágenes con ruta de red (o ruta local) en IE, Chrome y Firefox.
string encodedHtmlString = Emailmodel.DtEmailFields.Rows[0]["Body"].ToString();
// Decode the encoded string.
StringWriter myWriter = new StringWriter();
HttpUtility.HtmlDecode(encodedHtmlString, myWriter);
string DecodedHtmlString = myWriter.ToString();
//find and replace each img src with byte string
HtmlDocument document = new HtmlDocument();
document.LoadHtml(DecodedHtmlString);
document.DocumentNode.Descendants("img")
.Where(e =>
{
string src = e.GetAttributeValue("src", null) ?? "";
return !string.IsNullOrEmpty(src);//&& src.StartsWith("data:image");
})
.ToList()
.ForEach(x =>
{
string currentSrcValue = x.GetAttributeValue("src", null);
string filePath = Path.GetDirectoryName(currentSrcValue) + "//";
string filename = Path.GetFileName(currentSrcValue);
string contenttype = "image/" + Path.GetExtension(filename).Replace(".", "");
FileStream fs = new FileStream(filePath + filename, FileMode.Open, FileAccess.Read);
BinaryReader br = new BinaryReader(fs);
Byte[] bytes = br.ReadBytes((Int32)fs.Length);
br.Close();
fs.Close();
x.SetAttributeValue("src", "data:" + contenttype + ";base64," + Convert.ToBase64String(bytes));
});
string result = document.DocumentNode.OuterHtml;
//Encode HTML string
string myEncodedString = HttpUtility.HtmlEncode(result);
Emailmodel.DtEmailFields.Rows[0]["Body"] = myEncodedString;