PDF.JS跨域
PDF.JS Cross Domain
我正在尝试使用 PDF.JS 在浏览器中呈现用户的 PDF。
我们将 PDF 文件存储在 Azure Blob 存储中,我们有 CORS 和 SAS 允许我们的 front-end 直接与 Blob 交互 upload/download。
我已经用 Chrome、Firefox 和 Safari 测试了我们的设置,Chrome 是唯一无法检索文件的浏览器。我得到的错误与不安全的 headers 有关,我知道下面的异常是由于无法读取 Content-Range
header.
Refused to get unsafe header "Content-Encoding"
Refused to get unsafe header "Content-Range"
Uncaught TypeError: Cannot read property '1' of null
at NetworkManager_onStateChange [as onStateChange]
来自 Azure 的响应 header 看起来像:
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Accept-Ranges,Content-Range,Content-Encoding,Content-Length
Cache-Control: max-age=1209600
Content-Disposition: attachment; filename=tracemonkey.pdf
Content-Length: 65536
Content-Range: bytes 0-65535/1016315
Content-Type: application/pdf
Date: Tue, 09 May 2017 15:31:33 GMT
Etag: "0x8D49632DD6406EC"
Last-Modified: Mon, 08 May 2017 16:54:17 GMT
Server: Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0
x-ms-blob-type: BlockBlob
x-ms-lease-state: available
x-ms-lease-status: unlocked
x-ms-request-id: 56258985-0001-0062-15d9-c8130c000000
x-ms-server-encrypted: false
x-ms-version: 2015-12-11
This is our setup for Blob Storage
任何人都可以帮我弄清楚我需要向 Azure Blob 存储提供哪些额外的配置才能使它在 Chrome 中工作?
所以这有点像 PEBKAC。我会把我的设置留在这里,供其他人使用。我们有一个应用程序 运行,每次我们 new
我们的 blob 服务 class 时都会设置 ExposedHeaders=*
和 AllowedHeaders=*
。因此,每次我进入我们的门户网站更新配置时,该应用程序都会在我之后进入并将其更改回来。
有效的设置如下:
{
Cors: {
CorsRule: [
{
AllowedOrigins: [‘*’],
AllowedMethods: [‘GET’, ‘PUT’, ‘DELETE’],
AllowedHeaders: [‘Accept-Ranges’, ‘Content-Encoding’, ‘Content-Length’, ‘Content-Type’, ‘Range’, ‘Authorization’,'x-ms-blob-content-type', 'x-ms-blob-type', 'x-ms-version'], // x-ms headers for upload
ExposedHeaders: [‘Accept-Ranges’, ‘Content-Range’, ‘Content-Encoding’, ‘Content-Length’, ‘Content-Type’],
MaxAgeInSeconds: Constants.timeout,
},
],
},
}
感谢@async5 的帮助。
设置此规则,处理相同问题
<Cors>
<CorsRule>
<AllowedOrigins>http://www.contoso.com, http://www.fabrikam.com</AllowedOrigins>
<AllowedMethods>PUT,GET,POST</AllowedMethods>
<AllowedHeaders>x-ms-meta-abc,x-ms-meta-data*,x-ms-meta-target*</AllowedHeaders>
<ExposedHeaders>x-ms-meta-customheader,x-ms-meta-data*</ExposedHeaders>
<MaxAgeInSeconds>200</MaxAgeInSeconds>
</CorsRule>
<Cors>
我正在尝试使用 PDF.JS 在浏览器中呈现用户的 PDF。
我们将 PDF 文件存储在 Azure Blob 存储中,我们有 CORS 和 SAS 允许我们的 front-end 直接与 Blob 交互 upload/download。
我已经用 Chrome、Firefox 和 Safari 测试了我们的设置,Chrome 是唯一无法检索文件的浏览器。我得到的错误与不安全的 headers 有关,我知道下面的异常是由于无法读取 Content-Range
header.
Refused to get unsafe header "Content-Encoding"
Refused to get unsafe header "Content-Range"
Uncaught TypeError: Cannot read property '1' of null
at NetworkManager_onStateChange [as onStateChange]
来自 Azure 的响应 header 看起来像:
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Accept-Ranges,Content-Range,Content-Encoding,Content-Length
Cache-Control: max-age=1209600
Content-Disposition: attachment; filename=tracemonkey.pdf
Content-Length: 65536
Content-Range: bytes 0-65535/1016315
Content-Type: application/pdf
Date: Tue, 09 May 2017 15:31:33 GMT
Etag: "0x8D49632DD6406EC"
Last-Modified: Mon, 08 May 2017 16:54:17 GMT
Server: Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0
x-ms-blob-type: BlockBlob
x-ms-lease-state: available
x-ms-lease-status: unlocked
x-ms-request-id: 56258985-0001-0062-15d9-c8130c000000
x-ms-server-encrypted: false
x-ms-version: 2015-12-11
This is our setup for Blob Storage
任何人都可以帮我弄清楚我需要向 Azure Blob 存储提供哪些额外的配置才能使它在 Chrome 中工作?
所以这有点像 PEBKAC。我会把我的设置留在这里,供其他人使用。我们有一个应用程序 运行,每次我们 new
我们的 blob 服务 class 时都会设置 ExposedHeaders=*
和 AllowedHeaders=*
。因此,每次我进入我们的门户网站更新配置时,该应用程序都会在我之后进入并将其更改回来。
有效的设置如下:
{
Cors: {
CorsRule: [
{
AllowedOrigins: [‘*’],
AllowedMethods: [‘GET’, ‘PUT’, ‘DELETE’],
AllowedHeaders: [‘Accept-Ranges’, ‘Content-Encoding’, ‘Content-Length’, ‘Content-Type’, ‘Range’, ‘Authorization’,'x-ms-blob-content-type', 'x-ms-blob-type', 'x-ms-version'], // x-ms headers for upload
ExposedHeaders: [‘Accept-Ranges’, ‘Content-Range’, ‘Content-Encoding’, ‘Content-Length’, ‘Content-Type’],
MaxAgeInSeconds: Constants.timeout,
},
],
},
}
感谢@async5 的帮助。
设置此规则,处理相同问题
<Cors>
<CorsRule>
<AllowedOrigins>http://www.contoso.com, http://www.fabrikam.com</AllowedOrigins>
<AllowedMethods>PUT,GET,POST</AllowedMethods>
<AllowedHeaders>x-ms-meta-abc,x-ms-meta-data*,x-ms-meta-target*</AllowedHeaders>
<ExposedHeaders>x-ms-meta-customheader,x-ms-meta-data*</ExposedHeaders>
<MaxAgeInSeconds>200</MaxAgeInSeconds>
</CorsRule>
<Cors>