Pdf.js: viewer.js는 온라인 PDF 스트림을 사용할 수 없습니다.

관련 문제는 #522, #586 및 #842입니다.

위 문제에서 언급했듯이 이것은 사용자가 프록시 또는 CORS를 사용하여 스스로 수정해야 하는 것입니다.

안녕하세요 브렌드님

"사용자가 프록시 또는 CORS를 사용하여 스스로 수정해야 하는" 주된 이유는 무엇입니까?

PDF가 "http://"와 같은 로컬(업로드), 서버를 파일로, 서버에서 스트림으로 가져올 수 있다는 것이 중요합니다.

PDF 리더는 이미지 URL로 HTTP URL을 지원해야 합니다.

감사 해요

@jonasyuandotcom cors를 사용하면 동일한 서버에서 http를 사용하여 pdf를 가져올 수 있습니다. 그러나 브라우저는 사용자가 데이터를 외부 서버로 가져오거나 보내는 것을 보호합니다. 이러한 서버는 http 헤더를 사용하여 이 제한을 우회해야 합니다.

서버 측 프록시는 뷰어와 동일한 서버에 위치하므로 괜찮습니다.

@notmasteryet 감사합니다. 다음과 같은 동일한 서버를 사용할 때 작동합니다.

var kDefaultURL = '/pdf-reader-web/sample.pdf';

안녕 조나스,

브라우저 보안 제한으로 인해 구현할 수 없기 때문에 우리는 이것을 구현하지 않을 것입니다. http://en.wikipedia.org/wiki/XMLHttpRequest#Cross -domain_requests 참조

브렌든

안녕하세요 @brendandahl

2011년 이후 업데이트가 있는지 궁금합니다. CORS 문제를 해결하는 것이 여전히 불가능합니까?

예. 자세한 내용은 https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq -xhr을 참조

팀 감사합니다!

안녕하세요 @timvandermeij입니다. 응답해 주셔서 감사합니다. 많은 솔루션을 시도했지만 여전히 내 웹 서버에서 CORS를 허용할 수 없습니다. git 예제가 있습니까?

@Dassine 여기 http://mozilla.github.io/pdf.js/web/viewer.html?file=//async5.org/moz/pdfjs.pdf -- PDF 뷰어 로드 http://async5.org /moz/pdfjs.pdf . async5.org는 mozilla.github.io가 파일을 가져오는 것을 허용합니다. 그렇지 않으면 웹 브라우저는 보안상의 이유로 원격 파일 액세스를 차단해야 합니다. 이것은 웹의 표준 관행이며 브라우저 보안을 우회하기 위해 PDF.js가 할 수 있는 일은 없습니다.

데스크탑/모바일 애플리케이션에 브라우저 컨트롤을 포함하는 경우 OS/Framework API를 사용하여 바이너리 데이터를 요청하고 Uint8Array로 PDF.js에 전달할 수 있습니다.

귀하의 링크에 대해 @yurydelendik 에게 감사드립니다. PDF.js가 CORS를 관리하지 않는다는 것을 알고 있습니다. @timvandermeij 및 기타에서 보낸 솔루션을 시도했지만 실패했습니다. pdf.js 저장소가 다운로드되면 올바른 구현/수정 솔루션을 찾고 있습니다. 감사 해요

@yurydelendik 또한 원격 PDF 파일을 로드하는 데 문제가 있습니다. 그러나 이 오류는 Chrome에서만 발생합니다.
PDF.js v1.0.1040(빌드: 997096f)
메시지: PDF " http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal.pdf "를 검색하는 동안 예기치 않은 서버 응답(0)이 발생했습니다.

내가 로드하려고 하는 PDF가 내가 제어할 수 없는 다른 서버에 있다는 것을 알 수 있습니다. 하지만 여전히 내 viewer.js에 이 PDF를 표시하고 싶습니다.

CORS에 대한 경험이 많지 않지만 서버에 최소한의 보안 crossdomain.xml 파일을 생성했지만 작동하지 않습니다.

@hashbyte 서버용 프록시가 필요합니다. 내가 개발한 매우 간단한 프록시는 CORS Anywhere입니다. PDF 파일의 URL 앞에 프록시의 URL을 추가하기만 하면 됩니다. 예:

"https://cors-anywhere.herokuapp.com/" + 
"http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal.pdf" =
"https://cors-anywhere.herokuapp.com/http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal.pdf"

그런 다음 이 URL을 URL 인코딩하고 file 매개변수에 넣으면 모든 페이지를 열 수 있는 링크를 얻을 수 있습니다. https://mozilla.github.io/pdf.js/web/viewer.html ?file=https%3A%2F%2Fcors-anywhere.herokuapp.com%2Fhttp%3A%2F%2Fbhpr.hrsa.gov%2Fhealthworkforce%2Frnsurveys%2Frnsurveyfinal.pdf

참고: PDF URL에 퍼센트 기호나 & 문자가 포함되어 있지 않은 경우 링크를 빠르게 가져오는 더 쉬운 방법은 링크 앞에 뷰어 URL을 추가하는 것입니다(따라서 먼저 URL 인코딩 없이 ). URL을 수동으로 입력하는 경우에만 이 작업을 수행하십시오(예: 빠른 테스트를 수행할 때):
https://mozilla.github.io/pdf.js/web/viewer.html?file=https://cors-anywhere.herokuapp.com/ http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal. PDF

참고: CORS Anywhere 데모는 기능을 보여주기 위해서만 제공됩니다. 방문자가 많은 사이트에서 이 기능을 사용하려는 경우 공개 데모 서버에 부당한 부하가 걸리지 않도록 CORS Anywhere 인스턴스를 직접 호스팅하십시오. CORS Anywhere의 성능이 남용으로 인해 크롤링되는 것을 발견하면 귀하의 출처가 블랙리스트에 올라갑니다. CORS Anywhere를 직접 호스팅할 때 originWhitelist 구성 매개변수를 통해서만 사이트에 대한 액세스를 제한하여 이러한 남용을 방지할 수 있습니다.

안녕하세요,
외부 URL에서 pdf를 로드하려고 할 때 이 오류가 발생합니다.

오류: 파일 원본이 뷰어의 원본과 일치하지 않습니다.
throw new Error('파일 원본이 뷰어와 일치하지 않습니다.');

도와주세요!

외부 URL에서 pdf를 로드하려고 할 때 이 오류가 발생합니다.

@gildassamuel 자세한 내용은 #6916을 참조하세요.

@jonasyuandotcom 파일을 직접 관리하는 경우 파일과 pdfjs를 동일한 파일 서버에 둘 수 있습니다.

파일 서버에서 "Access-Control-Allow-Origin"을 설정하라는 지침을 따랐지만 계속 이 오류가 발생합니다.

http 헤더는 다음과 같습니다.

문제의 가능한 원인을 제공할 수 있는지 확실하지 않더라도 모든 포인터를 주시면 감사하겠습니다. 매우 감사합니다!

@yjguoo 오류 메시지와 헤더가 합산되지 않습니다.

리디렉션 대상에 예상 헤더가 없는 것 같습니다.

chrome://net-internals/#events 방문하고 단계를 반복하여 로그에서 차단된 리디렉션의 실제 헤더를 확인합니다.

안녕하세요 Rob 빠른 응답에 감사드립니다.

요청한 URL "https://files.dev52.slack.com/files-pri/T076SHX5W-F07CGBKK2/git-for-beginners-handout.pdf"를 수동으로 입력하면 파일 서버에서 다른 응답 헤더가 나타납니다.

응답 헤더의 다른 위치로 라우팅되었음을 알 수 있습니다. 그리고 그 새로운 위치에서 나는 상태 200 ok를 얻습니다.

내 첫 번째 질문: 브라우저에서 수동으로 URL을 입력하는 것과 XmlHttpRequest를 통한 것 사이에 차이점이 있습니까?
BTW 기본 pdf.js 뷰어(html css js)를 사용하고 있습니다. 다른 출처에서 pdf를 요청하는 것을 제외하고 모든 기능이 작동합니다(교차 또는 요청 문제)
두 번째 질문: 제 문제인지 아니면 기본 viewer.js/pdf.js가 XmlHttpRequest를 수행하는 방식에 문제가 있다고 생각하십니까?

고맙습니다 :)

내 첫 번째 질문: 브라우저에서 수동으로 URL을 입력하는 것과 XmlHttpRequest를 통한 것 사이에 차이점이 있습니까?

예, 특히 교차 출처 요청의 경우. 교차 출처 요청을 수행할 때 요청은 CORS에서 허용한 경우에만 허용됩니다. 브라우저는 Origin 헤더로 요청을 발행하고, 서버는 이를 사용하여 요청 승인 여부를 결정할 수 있습니다( Access-Control-Allow-Origin 응답 헤더에 요청된 출처 포함).

또한 기본적으로 자격 증명은 교차 출처 요청에 포함되지 않습니다. 쿠키를 포함하려면 서버가 Access-Control-Allow-Credentials: true 응답해야 하고 XHR 요청에 withCredentials 속성이 true 설정되어 있어야 합니다.

두 번째 질문: 제 문제인지 아니면 기본 viewer.js/pdf.js가 XmlHttpRequest를 수행하는 방식에 문제가 있다고 생각하십니까?

서버를 다르게 구성해야 한다고 생각합니다.

자세한 내용은 MDN 문서를 참조하십시오. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
또는 CORS 사양 읽기: https://www.w3.org/TR/2014/REC-cors-20140116/

안녕하세요 롭,

Access-Control-Allow-Credentials: true 도 설정하여 문제를 해결했다고 생각합니다. 많은 도움을 주셔서 감사합니다 <3. 그러나 리디렉션과 관련하여 또 다른 문제가 발생하여 몇 가지 지침을 제공할 수 있는지 모르겠습니다. 나는 XHR을 한다
URL#1을 사용하여 요청하십시오(해결하는 데 도움이 되는 문제). 그런 다음 URL#2(상태 302)로 리디렉션됩니다. 그러나 URL#1과 URL#2는 모두 동일한 서버를 가리킵니다. 다음 오류가 발생합니다.

URL#1에 대해 했던 것과 동일한 응답 헤더를 설정하려고 시도했지만 둘 다 동일한 서버에 있고 Origin이 null이라는 것을 깨달았습니다.

두 URL이 동일한 서버를 가리키기 때문에 리디렉션 출처가 NULL이지만 확실하지 않기 때문이라고 생각합니다. 이제 두 개의 다른 출처를 처리하지만 두 URL이 동일한 파일 서버를 가리키는 헤더를 추가하는 방법은 무엇입니까? *와 같은 정규식을 사용해 보았지만 분명히 허용되지 않습니다. (다시 한번 감사합니다!

교차 출처 리디렉션 후 Chrome은 원본 헤더를 실제 URL 대신 "null" 값으로 설정합니다( https://crbug.com/154967).

null 값이 있는 Access-Control-Allow-Origin 를 조건부로 반환할 수 있지만 모든 웹사이트에서 해당 리소스를 읽을 수 있도록 하려는 경우에만 가능합니다 . 그렇지 않은 경우(대부분) 리디렉션을 피해야 합니다. 예를 들어 요청을 대상 URL로 직접 전송하여(URL을 미리 알지 못하는 경우 대상 URL을 반환하는 새 API 끝점을 서버에 추가).

감사합니다! 살펴볼게요 :)

Hey Rob src가 이미 설정된 pdf 뷰어나 pdf.js를 초기화하고 XHR 요청을 한꺼번에 피하는 다른 방법이 있다고 생각하십니까?

@yjguoo PDF 데이터를 base64로 인코딩하고 데이터 URL을 사용할 수 있습니다. 큰 PDF 파일의 경우 데이터를 base64로 인코딩하면 파일 크기가 33% 증가하기 때문에 이로 인해 사용자 경험이 나빠집니다(=진행률 표시줄이 없는 빈 페이지). 이러한 이유로 XHR을 계속 사용하는 것이 좋습니다.

안녕하세요, 방금 테스트했으며 CORS가 활성화된 경우 작동하지만 파일이 매우 큰 경우 파일을 청크/범위로 가져오지 못하는 것으로 나타났습니다.

.htaccess에 이것을 추가하여 해결:
헤더 세트 Accept-Ranges 바이트
헤더 세트 Access-Control-Allow-Origin "*"
헤더 세트 Access-Control-Allow-Methods "GET"
헤더 세트 Access-Control-Allow-Headers "콘텐츠 유형, 범위"
헤더 세트 Access-Control-Expose-Headers "Accept-Ranges, Content-Encoding, Content-Length, Content-Range"

감사합니다!!!

@Rob--W 많은 도움이 되었습니다. 프로젝트 내부에서 작동할 가능성이 있습니까(예: XHR 헤더 변경)? (worker.js 내부)

안녕하세요, 여전히 이것에 문제가 있는 사람을 위해 다음과 같이 해결했습니다.

https://drive.google.com/viewerng/viewer?embedded=true&url=http://www.africau.edu/images/default/sample.pdf