Cross Origin issue occuring

[imdineshkumar13]

[biiibooo[bot]]

👋 @imdineshkumar13

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[imdineshkumar13]

👋 @imdineshkumar13

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

I used htmlToImage npm. whenever I tried to get the asset url from the UnLayer, it threw CORS origin issue, I wasn't able to add the useCORS: true, in the parameter

[cyyjs]

useCORS is not mentioned in the documentation

[cyyjs]

可以通过filter参数，修改图片的src为代理地址，绕过跨域问题： 代码示例：

const blob = await toBlob(el, {
    filter:(node) => {
      if (node.nodeName === 'IMG') {
        node.src = `/proxy?uri=${encodeURIComponent(node.src)}`
      }
      return true
    }
})

自己在服务端实现/proxy接口，来响应图片请求

[SimRunBot]

in case you are lost in this CORS error depth , The only thing that worked for me was translating the other comments and implementing the proxy api route from my own nextjs application the code is the following

// app/api/proxy-image/route.ts

import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const url = request.nextUrl.searchParams.get("url");

  if (!url) {
    return NextResponse.json(
      { error: "Missing URL parameter" },
      { status: 400 }
    );
  }

  try {
    const imageResponse = await fetch(url);

    if (!imageResponse.ok) {
      return NextResponse.json(
        { error: "Failed to fetch image" },
        { status: imageResponse.status }
      );
    }

    const contentType = imageResponse.headers.get("Content-Type");
    const arrayBuffer = await imageResponse.arrayBuffer();

    return new NextResponse(arrayBuffer, {
      headers: {
        "Content-Type": contentType || "application/octet-stream",
        "Cache-Control": "public, max-age=3600",
      },
    });
  } catch (error) {
    console.error("Error proxying image:", error);
    return NextResponse.json(
      { error: "Internal server error" },
      { status: 500 }
    );
  }
}

then i went ahead and filtered all the img tags and reset their src during the toPng function call like so:

 toPng(node, {
      includeQueryParams: true,
      filter: (node) => {
        if (node.nodeName === "IMG") {
          (node as HTMLImageElement).src = `/api/proxy-image?url=${
            (node as HTMLImageElement).src
          }`;
        }
        return true;
      }, ... 
      
      ``` 
      
hope this helps anyone stumbling on this issue like i did for the last couple of hours of frustrating debugging