
[英]How to enable CORS between Firebase Hosting and Google App Engine
[英]Switching from google-app-engine to firebase-hosting causes cors errors for google-file-storage
从app-engine切换到firebasehosting后,对于在本地主机和生产环境中的app-enggine版本上载的每个文件,我都会收到以下错误消息:
Access to fetch at 'https://storage.googleapis.com/BUCKETNAME/uploads%2Fcompress%40_1566757062038_IMG201906.webp?GoogleAccessId=PROJECTID%40appspot.gserviceaccount.com&Expires=16730323200&Signature=SIGNATURE' from origin 'https://DOMAINNAME' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Bucked具有以下cors设置:
[{"maxAgeSeconds": 3600, "method": ["GET", "HEAD", "DELETE"], "origin": ["*"]}]
请求所有文件,并在后端生成带有签名的URL,如下所示:
const config = {
action: 'read',
expires: '03-01-2500',
};
const [thumbFileUrl] = await bucket.file(PATH).getSignedUrl(config);
前端中的请求由
<img [src]="upload.DownloadUrl" crossorigin="anonymous" >
新上载正常。 只是开关之前的那些会导致错误。
还要在firebase托管配置中进行设置
"hosting": {
"public": "dist/browser",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
},
{
"source": "**/*.@(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
}
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.