복붙노트

[JQUERY] 로컬 파일을 열 수 없습니다 - 크롬 : 로컬 리소스를로드 할 수 없음

JQUERY

로컬 파일을 열 수 없습니다 - 크롬 : 로컬 리소스를로드 할 수 없음

해결법


  1. 1.이 나이의 종류 알고 있지만,이 같은 많은 질문을 볼 ...

    이 나이의 종류 알고 있지만,이 같은 많은 질문을 볼 ...

    우리는 많은 교실에서 크롬을 사용하고 로컬 파일 작업에 필수입니다.

    우리가 사용하고있는 것은 "크롬 웹 서버"입니다. 당신이 작업하고자하는 폴더를 선택, 그것을 시작하고 URL로 이동 (선택한 127.0.0.1:port 등)

    그것은 간단한 서버이며, PHP를 사용할 수 있지만 간단한 작업을 위해, 당신의 솔루션이 될 수 있습니다 :

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


  2. 2.자 여러분, 나는 완전히이 오류 메시지 뒤에 보안상의 이유를 이해하지만 때때로 우리는 해결 방법이 필요합니까 ... 그리고 여기 내 꺼야. 그것은 (이 질문에 기반이 아닌 자바 스크립트) ASP.Net을 사용하지만 희망 누군가에게 도움이 될 것입니다.

    자 여러분, 나는 완전히이 오류 메시지 뒤에 보안상의 이유를 이해하지만 때때로 우리는 해결 방법이 필요합니까 ... 그리고 여기 내 꺼야. 그것은 (이 질문에 기반이 아닌 자바 스크립트) ASP.Net을 사용하지만 희망 누군가에게 도움이 될 것입니다.

    우리의 사내 응용 프로그램은 사용자가 우리의 네트워크를 통해 유용한 파일 확산에 대한 바로 가기 목록을 만들 수있는 웹 페이지가 있습니다. 그들은 이러한 바로 가기 중 하나를 클릭하면, 우리는 이러한 파일을 열려면 ...하지만 물론, 크롬의 오류가이 문제를 방지 할 수 있습니다.

    이 웹 페이지 사용의 AngularJS와 다양한 바로 가기를 나열하는 1.X.

    원래 내 웹 페이지를 직접 파일에 가리키는 요소를 만들려고했지만,이 생성 된 사용자가 이러한 링크 중 하나를 클릭하면 오류 "로컬 리소스를로드 할 수 없음".

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

    이 솔루션은 내 각도 컨트롤러에서 함수를 호출하기 위해,이 코드를 가진 사람들 요소를 교체했다 ...

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

    기능 자체는 매우 간단합니다 ...

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

    그리고 내 ASP.Net 프로젝트에서,이 코드를 포함 DownloadExternalFile.aspx라는 핸들러 파일을 추가 :

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

    그리고 그게 다야.

    자, 내 바로 가기 링크 중 하나에 사용자가 클릭, 그것은 그것을 우리가 열고 자하는 파일의 경로 + 파일 이름을 통과,이 .ASHX 파일을 여는 OpenAnExternalFile 함수를 호출 할 때.

    이 핸들러 코드로드 파일은 다음의 내용은 HTTP 응답에 다시 전달합니다.

    그리고, 작업은 웹 페이지 외부 파일을 엽니 다, 다.

    휴! 다시 - 크롬이 발생 이유가이 때문에 트레드주의 깊게과, 예외를 "하지 로컬 리소스를로드 할 수"...하지만 난 그냥이이 문제를 해결 매우 간단한 방법이 있음을 입증하기 위해이 코드를 게시하도록하겠습니다.

    그냥 마지막 코멘트 : 원래의 질문에 ": \ 002.jpg을 C"파일을 엽니 다 싶었다. 당신은이 작업을 수행 할 수 없습니다. 그리고 사용자 자신의 C에 직접 액세스가 없습니다 : 드라이브 (드라이브가 자신의 C있어로) 당신의 웹 사이트는 하나 개의 서버에 앉아 것입니다. 당신이 할 수있는 최선 그래서 어딘가에 네트워크 드라이브에 액세스 파일에 광산과 같은 코드를 사용합니다.


  3. 3.크롬은 특히 블록 로컬 파일 액세스를 보안상의 이유로이 방법.

    크롬은 특히 블록 로컬 파일 액세스를 보안상의 이유로이 방법.

    여기에 크롬에서 플래그를 활성화 (과 취약점에 시스템을 개방) 할 수있는 해결 방법입니다 :


  4. 4.1) 터미널을 열고 다음을 입력

    1) 터미널을 열고 다음을 입력

    NPM 설치 -g HTTP 서버

    2) 당신은 당신이 파일을 입력 역할을 할 것인지 루트 폴더로 이동

    HTTP 서버 ./

    삼) 좀 HTTP 터미널, 뭔가의 출력을 읽기 : // localhost를 : 8080가 나타납니다.

    거기에 모든 것이있어이 허용됩니다. 예:

    배경 : 홈페이지 ( '통해 http : // localhost : 8080 / waw.png');


  5. 5.크롬에 대한 웹 서버를 사용하여 해결 방법이 있습니다. 다음 단계는 다음과 같습니다

    크롬에 대한 웹 서버를 사용하여 해결 방법이 있습니다. 다음 단계는 다음과 같습니다

    이제 쉽게 로컬 파일에 액세스 :

    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 : 당신은 당신이 어떤 크로스 원산지 액세스 에러에 직면 넣다 고급 설정에서 CORS 헤더 옵션을 선택해야 할 수도 있습니다.


  6. 6.당신은 따라서 "로컬 리소스 경고에 액세스 할 수 없습니다", 프로젝트 디렉토리 또는 사용자 레벨 디렉토리에서 이미지의 외부를로드 할 수 없습니다.

    당신은 따라서 "로컬 리소스 경고에 액세스 할 수 없습니다", 프로젝트 디렉토리 또는 사용자 레벨 디렉토리에서 이미지의 외부를로드 할 수 없습니다.

    당신이 {rootFolder} \ 내용 \ 내-가 image.jpg처럼 프로젝트의 루트 폴더에 파일을 배치했다 및 참조하지만 그렇게 좋아한다 :

    <img src="/Content/my-image.jpg" />
    

  7. 7.내가 서버 측 언어와 작품으로 PHP를 사용하고 때 주위 클라이언트로 결과를 전송하기 전에 base64로 내 이미지 enconding를 생성했다이 문제는 올

    내가 서버 측 언어와 작품으로 PHP를 사용하고 때 주위 클라이언트로 결과를 전송하기 전에 base64로 내 이미지 enconding를 생성했다이 문제는 올

    $path = 'E:/pat/rwanda.png';
    $type = pathinfo($path, PATHINFO_EXTENSION);
    $data = file_get_contents($path);
    $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
    

    나는 자신의 작품의 주위를 만드는 사람의 아이디어를 줄 수있다 생각

    감사


  8. 8.구글 크롬 때문에 보안의 지역 자원을로드 할 수 없습니다. 크롬은 HTTP URL이 필요합니다. Internet Explorer 및 Edge는 지역 자원을로드 할 수 있지만, 사파리, 크롬, 파이어 폭스는 지역 자원을로드 할 수 없습니다.

    구글 크롬 때문에 보안의 지역 자원을로드 할 수 없습니다. 크롬은 HTTP URL이 필요합니다. Internet Explorer 및 Edge는 지역 자원을로드 할 수 있지만, 사파리, 크롬, 파이어 폭스는 지역 자원을로드 할 수 없습니다.

    파일 위치로 이동하여 거기에서 파이썬 서버를 시작합니다.

    파이썬 -m SimpleHttpServer

    다음 함수에 해당 URL을 넣어 :

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

  9. 9.당신이 PHP를 설치 한 경우 - 당신은 서버 내장 사용할 수 있습니다. 파일과 실행에 그냥 개방 대상 디렉토리

    당신이 PHP를 설치 한 경우 - 당신은 서버 내장 사용할 수 있습니다. 파일과 실행에 그냥 개방 대상 디렉토리

    php -S localhost:8001
    

  10. 10.이 작업을 수행 할 수 있다면 당신은 당신의 파일 시스템을 액세스 할 수 있습니다, 그것은 큰 보안 문제를 나타낼 것이며, 잠재적으로 다행히 당신이 뭘 하려는지 할 수는 없습니다 ...이 가능한 데이터에 작용한다.

    이 작업을 수행 할 수 있다면 당신은 당신의 파일 시스템을 액세스 할 수 있습니다, 그것은 큰 보안 문제를 나타낼 것이며, 잠재적으로 다행히 당신이 뭘 하려는지 할 수는 없습니다 ...이 가능한 데이터에 작용한다.

    당신이 액세스 할 수 있도록 지역 자원을 필요로하는 경우, 당신은 당신의 컴퓨터에 웹 서버를 시작하려고 할 수 있으며,이 경우에 당신의 방법을 작동합니다. 다른 해결 방법은 크롬 설정에 작용하는대로, 가능하지만, 난 항상 아마 다른 포트에 로컬 웹 서버를 설치, 깨끗한 방법을 선호하는 (아니, 그렇게 어렵지 않다!).

    또한보십시오:


  11. 11.당신은 저장 인코딩 된 HTML 문자열 바이트 문자열의 모든 이미지의 네트워크 경로를 교체해야합니다. 이를 위해 당신은 HTML 문서에 HTML 문자열을 변환하는 HtmlAgilityPack이 필요합니다. https://www.nuget.org/packages/HtmlAgilityPack

    당신은 저장 인코딩 된 HTML 문자열 바이트 문자열의 모든 이미지의 네트워크 경로를 교체해야합니다. 이를 위해 당신은 HTML 문서에 HTML 문자열을 변환하는 HtmlAgilityPack이 필요합니다. https://www.nuget.org/packages/HtmlAgilityPack

    바이트 고통에 각 이미지의 src 네트워크 경로 (또는 로컬 경로)를 변환하는 코드를 아래 찾을 수 있습니다. 그것은 확실히 IE, 크롬 및 파이어 폭스에서 네트워크 경로 (또는 로컬 경로)가있는 이미지를 모두 표시합니다.

    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;
    

  12. 12.크롬 및 기타 브라우저는 보안상의 이유로 로컬 파일에 대한 서버의 액세스를 제한합니다. 그러나 당신은 허용 된 액세스 모드에서 브라우저를 열 수 있습니다. 그냥 터미널을 열고 chrome.exe의가 저장되는 폴더로 이동하고 다음 명령을 작성합니다.

    크롬 및 기타 브라우저는 보안상의 이유로 로컬 파일에 대한 서버의 액세스를 제한합니다. 그러나 당신은 허용 된 액세스 모드에서 브라우저를 열 수 있습니다. 그냥 터미널을 열고 chrome.exe의가 저장되는 폴더로 이동하고 다음 명령을 작성합니다.

    chrome.exe --allow-file-access-from-files
    

    자세한 내용은이 읽기

    나는 특정 디렉토리에있는 모든 파일에 대해 다른 경로를 만든 때문에이 방법은, 그러나, 나를 위해 작동하지 않았다. 따라서, 해당 경로로 이동하면 해당 파일을 여는 의미했다.

    function getroutes(list){ 
        list.forEach(function(element) { 
            app.get("/"+ element, function(req, res) { 
                res.sendFile(__dirname + "/public/extracted/" + element); 
           }); 
       }); 
    }
    

    나는 / 디렉토리 __dirname / 공공 장소에서 파일 이름의 목록을 전달하는이 함수를 호출 추출 그리고 내가 서버 측에서 렌더링 할 수 있었다 각 파일 이름에 대해 다른 경로를 만들었습니다.


  13. 13.이 솔루션은 PHP에서 일했다. 그것은 브라우저에서 PDF를 엽니 다.

    이 솔루션은 PHP에서 일했다. 그것은 브라우저에서 PDF를 엽니 다.

    // $path is the path to the pdf file
    public function showPDF($path) {
        if($path) {
            header("Content-type: application/pdf");
            header("Content-Disposition: inline; filename=filename.pdf");
            @readfile($path);
        }
    }
    

  14. 14.나는이 문제를 encounterd는데, 여기 각도에 대한 내 솔루션, 난에 encodeURIComponent 내 각도의 자산 폴더 () 함수를 감쌌다. 그것은했다. 하지만 여전히, 나는 어떤이 있다면이 솔루션의 위험에 대한 자세한 내용을 알고 싶습니다

    나는이 문제를 encounterd는데, 여기 각도에 대한 내 솔루션, 난에 encodeURIComponent 내 각도의 자산 폴더 () 함수를 감쌌다. 그것은했다. 하지만 여전히, 나는 어떤이 있다면이 솔루션의 위험에 대한 자세한 내용을 알고 싶습니다

    ```const를 URL = $ {에 encodeURIComponent (/assets/office/file_2.pdf)} window.open (URL)

    I used Angular 9, so this is my url when I clicked open local file:
    ```http://localhost:4200/%2Fassets%2Foffice%2Ffile_2.pdf```
    
  15. from https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource by cc-by-sa and MIT license