错误:访问的XMLHttpRequesthttps://storage.googleapis.com/urlCORS政策

Question

我的应用程序使用angular和nodejs。现在我在gcpcloud storage bucket中存储了pdf文件，通过在nodejs中使用getSignedUrl方法，我得到了pdf文件的url。

这是我的nodejs代码：

try {
let file = await bucket.file(fileName);
let url = await file.getSignedUrl({
action: "read",
expires: dd + "-" + mm + "-" + yyyy
});
res.send({
message: "found url",
data: url,
});
} catch (e) {
console.log(e);
res.status(400).send({ message: e });
}

现在在angular方面，我正试图使用从nodejs:获得的SignedUrl来获得这个pdf文件

角服务.ts

getDataOfUrl(url) {
let headers = new HttpHeaders();
headers.set('Accept', 'application/pdf');
this.http.get(url, { headers: headers, responseType: 'blob' as 'json' }).
subscribe(data => {
console.log(data)
}, (err) => {
console.log(err)
})
}

角分量.ts

onFileDownload(filename) {
let body = {
fileId: filename+".pdf"
}
this.homepageService.downloadFile(body).subscribe(
(data) =>{
this.signedUrl = data.data[0];
this.homepageService.getDataOfUrl(this.signedUrl)
window.open(data.data[0])
}, (error) => {
console.log(error)
}
)
}

现在onFileDownload做两项工作：

1. 获取签名URL并在新选项卡中打开pdf文件，以便我们可以下载它(这很好(
2. 但我发布这个问题是因为这个方法this.homepageService.getDataOfUrl(this.signedUrl)，当我传递url以获得某种格式的pdf数据时，我可以使用这些数据进行进一步的使用，比如将pdf转换为图像

我从中得到错误：

错误：

Access to XMLHttpRequest at 'https://storage.googleapis.com/url' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: 'Unknown Error', url: 'https://storage.googleapis.com/humana-author-pubsu…Et3Da%2BkAtV57lVpNuIs6L1%2BkaUKJCHU65rglKLA%3D%3D', ok: false, …}
error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: 'error', …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}

GET https://storage.googleapis.com/url net::ERR_FAILED 200

Answer 1

由于安全原因，您的bucket拒绝来自外部源的访问。在这种情况下，http://localhost:4200地址。这就是CORS的设计初衷。

谷歌有一个关于如何为你的bucket配置CORS的指南。您需要对您的本地主机地址和计划检索此数据的任何其他网站执行此操作。