[javascript] 로컬 파일을 열 수 없음-Chrome : 로컬 리소스를로드 할 수 없습니다.

좋아요 여러분, 저는이 오류 메시지의 보안 이유를 완전히 이해하고 있지만 때로는 해결 방법이 필요합니다. 이 질문의 기반이 된 JavaScript 대신 ASP.Net을 사용하지만 누군가에게 유용하기를 바랍니다.

사내 앱에는 사용자가 네트워크 전체에 퍼져있는 유용한 파일에 대한 바로 가기 목록을 만들 수있는 웹 페이지가 있습니다. 이 바로 가기 중 하나를 클릭하면이 파일을 열고 싶지만 Chrome의 오류로 인해이를 방지 할 수 있습니다.

이 웹 페이지는 AngularJS 1.x를 사용하여 다양한 바로 가기를 나열합니다.

원래 내 웹 페이지는 <a href..>파일을 가리키는 요소 를 직접 만들려고 했지만 Not allowed to load local resource사용자가 이러한 링크 중 하나를 클릭하면 ” “오류가 발생했습니다.

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

해결책은 해당 <a href..>요소를이 코드 로 대체하여 Angular 컨트롤러에서 함수를 호출하는 것입니다.

<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다음 코드가 포함 된 Handler 파일을 추가했습니다 .

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

그리고 그게 다야.

이제 사용자가 내 바로 가기 링크 중 하나를 클릭하면 OpenAnExternalFile함수를 호출 하여이 .ashx 파일을 열고 열고 자하는 파일의 경로 + 파일 이름을 전달합니다.

이 핸들러 코드는 파일을로드 한 다음 HTTP 응답에 해당 콘텐츠를 다시 전달합니다.

그리고 작업이 완료되면 웹 페이지에서 외부 파일을 엽니 다.

휴! 다시 말하지만, 크롬이이 ” Not allowed to load local resources“예외를 던지는 이유가 있습니다. 따라서 이것에 주의를 기울이십시오 …하지만이 코드가이 제한을 극복하는 매우 간단한 방법임을 보여주기 위해이 코드를 게시하고 있습니다.

마지막 코멘트 : 원래 질문은 ” C:\002.jpg” 파일을 열고 싶었습니다 . 당신 은 이것을 할 수 없습니다 . 웹 사이트는 하나의 서버 (자체 C : 드라이브 포함)에 위치하며 사용자의 C : 드라이브에 직접 액세스 할 수 없습니다. 따라서 최선의 방법은 네트워크 드라이브의 어딘가에있는 파일에 액세스하기 위해 내 것과 같은 코드를 사용하는 것입니다.