[JQUERY] 로컬 파일을 열 수 없습니다 - 크롬 : 로컬 리소스를로드 할 수 없음
JQUERY로컬 파일을 열 수 없습니다 - 크롬 : 로컬 리소스를로드 할 수 없음
해결법
-
1.이 나이의 종류 알고 있지만,이 같은 많은 질문을 볼 ...
이 나이의 종류 알고 있지만,이 같은 많은 질문을 볼 ...
우리는 많은 교실에서 크롬을 사용하고 로컬 파일 작업에 필수입니다.
우리가 사용하고있는 것은 "크롬 웹 서버"입니다. 당신이 작업하고자하는 폴더를 선택, 그것을 시작하고 URL로 이동 (선택한 127.0.0.1:port 등)
그것은 간단한 서버이며, PHP를 사용할 수 있지만 간단한 작업을 위해, 당신의 솔루션이 될 수 있습니다 :
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb
-
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.크롬은 특히 블록 로컬 파일 액세스를 보안상의 이유로이 방법.
크롬은 특히 블록 로컬 파일 액세스를 보안상의 이유로이 방법.
여기에 크롬에서 플래그를 활성화 (과 취약점에 시스템을 개방) 할 수있는 해결 방법입니다 :
-
4.1) 터미널을 열고 다음을 입력
1) 터미널을 열고 다음을 입력
NPM 설치 -g HTTP 서버
2) 당신은 당신이 파일을 입력 역할을 할 것인지 루트 폴더로 이동
HTTP 서버 ./
삼) 좀 HTTP 터미널, 뭔가의 출력을 읽기 : // localhost를 : 8080가 나타납니다.
거기에 모든 것이있어이 허용됩니다. 예:
배경 : 홈페이지 ( '통해 http : // localhost : 8080 / waw.png');
-
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.당신은 따라서 "로컬 리소스 경고에 액세스 할 수 없습니다", 프로젝트 디렉토리 또는 사용자 레벨 디렉토리에서 이미지의 외부를로드 할 수 없습니다.
당신은 따라서 "로컬 리소스 경고에 액세스 할 수 없습니다", 프로젝트 디렉토리 또는 사용자 레벨 디렉토리에서 이미지의 외부를로드 할 수 없습니다.
당신이 {rootFolder} \ 내용 \ 내-가 image.jpg처럼 프로젝트의 루트 폴더에 파일을 배치했다 및 참조하지만 그렇게 좋아한다 :
<img src="/Content/my-image.jpg" />
-
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.구글 크롬 때문에 보안의 지역 자원을로드 할 수 없습니다. 크롬은 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.당신이 PHP를 설치 한 경우 - 당신은 서버 내장 사용할 수 있습니다. 파일과 실행에 그냥 개방 대상 디렉토리
당신이 PHP를 설치 한 경우 - 당신은 서버 내장 사용할 수 있습니다. 파일과 실행에 그냥 개방 대상 디렉토리
php -S localhost:8001
-
10.이 작업을 수행 할 수 있다면 당신은 당신의 파일 시스템을 액세스 할 수 있습니다, 그것은 큰 보안 문제를 나타낼 것이며, 잠재적으로 다행히 당신이 뭘 하려는지 할 수는 없습니다 ...이 가능한 데이터에 작용한다.
이 작업을 수행 할 수 있다면 당신은 당신의 파일 시스템을 액세스 할 수 있습니다, 그것은 큰 보안 문제를 나타낼 것이며, 잠재적으로 다행히 당신이 뭘 하려는지 할 수는 없습니다 ...이 가능한 데이터에 작용한다.
당신이 액세스 할 수 있도록 지역 자원을 필요로하는 경우, 당신은 당신의 컴퓨터에 웹 서버를 시작하려고 할 수 있으며,이 경우에 당신의 방법을 작동합니다. 다른 해결 방법은 크롬 설정에 작용하는대로, 가능하지만, 난 항상 아마 다른 포트에 로컬 웹 서버를 설치, 깨끗한 방법을 선호하는 (아니, 그렇게 어렵지 않다!).
또한보십시오:
-
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.크롬 및 기타 브라우저는 보안상의 이유로 로컬 파일에 대한 서버의 액세스를 제한합니다. 그러나 당신은 허용 된 액세스 모드에서 브라우저를 열 수 있습니다. 그냥 터미널을 열고 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.이 솔루션은 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.나는이 문제를 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```
from https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] JQuery와 부하 ()는 파이어 폭스에서 작업? (0) | 2020.10.06 |
---|---|
[JQUERY] 이 jQuery를 준비 기능의 차이점은 무엇입니까? (0) | 2020.10.06 |
[JQUERY] jQuery를 콘텐츠 후 작업은 AJAX를 통해로드하지 않습니다 (0) | 2020.10.06 |
[JQUERY] 웹 서비스 반환에 jQuery를 호출 "아니 운송"오류 (0) | 2020.10.06 |
[JQUERY] $ (문서) .ready 필요가 있습니까? (0) | 2020.10.06 |