尝试将 Firebase 存储图像 URL 加载到元标记时出现无效 HTTP method/URL 对错误

Question

我正在尝试在我的 og:image 元标记中包含一张图片，该图片动态加载特定商店的图片，该图片由正在使用我的应用程序的用户共享，当他想通过以下方式分享商店时WhatsApp 以便显示带有商店标题、描述和图像的缩略图。

但是它没有加载，所以我打开了开发者工具并检查了我的元标记的元素，我发现 URL 导致了这个错误：

{
  "error": {
    "code": 400,
    "message": "Invalid HTTP method/URL pair."
  }
}

这是我的代码：

共享的着陆页 link：

    <meta property="og:title" content="<?php echo $_GET["title"]; ?>" />
    <meta property="og:description" content="<?php echo $_GET["desc"]; ?>"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url"  content=""/>
    <meta property="og:image" content ="<?php  echo $_GET["img"];?>"

已发送URL:

https://MyWebsiteName.com/share/?shop=xJbOcJDm1EOAkQdj0P3Q&title=Sorso&desc=Proudly%20Serving%20Gardelli%20Specialty%20Coffees&img=https://firebasestorage.googleapis.com/v0/b/myappname-9ff0f.appspot.com/o/Profile%20Image%2FxJbOcJDm1EOAkQdj0P3Q%2F125819259_2799019546979252_3099556570327477479_n.jpeg?alt=media&token=10450a78-d240-4f88-bb47-e809f91937c6

元标记检查：

<meta property="og:image" content="https://firebasestorage.googleapis.com/v0/b/myappname-9ff0f.appspot.com/o/Profile Image/xJbOcJDm1EOAkQdj0P3Q/125819259_2799019546979252_3099556570327477479_n.jpeg?alt=media"/>

有什么问题以及如何将 firebase 存储图像 URL 正确加载到元标记中？

编辑：

在 url 中包含 firebase 存储令牌已通过，但仍然出现相同的错误：

{
      "error": {
        "code": 400,
        "message": "Invalid HTTP method/URL pair."
      }
    }
<meta property="og:title" content="<?php echo $_GET["title"]; ?>" />
    <meta property="og:description" content="<?php echo $_GET["desc"]; ?>"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url"  content="<?php echo $_GET["img"].""."&token=".$_GET["token"]; ?>"/>
    <meta property="og:image" content ="<?php echo $_GET["img"].""."&token=".$_GET["token"];?>"/>

我认为问题在于元标记正在将“/”符号的编码从 %2F 转换为“/”，这就是它无效的原因。我如何让元标记不为我的 url 执行此操作？

Answer 1

最近遇到了类似的问题，必须通过后台保存图片，并提供一个public持久化url；经过一些研究发现了这篇很棒的文章：

https://www.sentinelstand.com/article/guide-to-firebase-storage-download-urls-tokens

如果 url 应该生成在 server-side

基本上，如果 url 无效（这可能导致您发布的 400 错误），问题可能与 token url 有关参数：当您将文件上传到云存储时（不知道是否也手动但肯定是使用 SDK 库）您的文件自动获取存储在“firebaseStorageDownloadTokens”元数据中的令牌键。

正确的 public url 可以用客户端 SDK 库生成，但服务器 SDK 似乎不具有相同的功能（至少不是全部）。

如果您构建 url 添加此令牌，那么您应该能够 publicly 访问您的图像。在我上面链接的文章中有一个 NodeJS 示例，我根据需要编写了代码 (Golang)

func CreatePersistentDownloadUrl(
    ctx context.Context,
    object *gcs.ObjectHandle,
) (string, error) {

    attrs, err := object.Attrs(ctx)
    if err != nil {
        return "", err
    }

    token, ok := attrs.Metadata["firebaseStorageDownloadTokens"]
    if !ok {
        return "", errors.New("file token not found")
    }

    parsedName := url.QueryEscape(object.ObjectName())

    return fmt.Sprintf(
        "https://firebasestorage.googleapis.com/v0/b/%s/o/%s?alt=media&token=%s",
        object.BucketName(),
        parsedName,
        token,
    ), nil
}

代码上的相关部分是2:

文件上传后，获取其属性和元数据以检索分配的令牌
以 "https://firebasestorage.googleapis.com/v0/b/[bucket] 的形式构建您的 url /o/[文件]?alt=media&token=[token]"

不要忘记URL对文件名进行编码！

如果 url 应该生成在 client-side

也就是说，客户端 SDK 库应该能够生成这样的 url 而无需手动获取文件元数据，但是如果 url 无效，您应该首先检查 url本身，用浏览器验证结果，然后检查问题是否可能是查询字符串的php解析。

让我们假设您的客户端生成了一个像这样形成的 url 并且您已经检查了 url 的正确性（请注意以下 url 已经进行了一些编码，请参阅 space 编码为“%20”):

https://firebasestorage.googleapis.com/v0/b/myappname-9ff0f.appspot.com/o/Profile%20Image/xJbOcJDm1EOAkQdj0P3Q/125819259_2799019546979252_3099556570327477479_n.jpeg?alt=media&token=10450a78-d240-4f88-bb47-e809f91937c6

在将 URL 传递给服务器之前，我会在 Javascript:

中这样编码

encodeURIComponent(url);

// Which gives you this
// https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fmyappname-9ff0f.appspot.com%2Fo%2FProfile%2520Image%2FxJbOcJDm1EOAkQdj0P3Q%2F125819259_2799019546979252_3099556570327477479_n.jpeg%3Falt%3Dmedia%26token%3D10450a78-d240-4f88-bb47-e809f91937c6

现在在 server-side 上，您将查询字符串值解码为 re-obtain url:

$url = urldecode($_GET['img']);

// You should get this
// https://firebasestorage.googleapis.com/v0/b/myappname-9ff0f.appspot.com/o/Profile%20Image/xJbOcJDm1EOAkQdj0P3Q/125819259_2799019546979252_3099556570327477479_n.jpeg?alt=media&token=10450a78-d240-4f88-bb47-e809f91937c6

尝试将 Firebase 存储图像 URL 加载到元标记时出现无效 HTTP method/URL 对错误

Getting invalid HTTP method/URL pair Error when trying to load Firebase Storage Image URL into meta tag

html

meta-tags

whatsapp

firebase

firebase-storage

如果 url 应该生成在 server-side

如果 url 应该生成在 client-side