Image Processing API => "Unable to fetch image from url..."

[ohabash]

I am trying the basic example provided in the docs

async convertImg(url: string): Promise<string> {
    const operations = [
      {
        operation: 'input',
        type: 'url',
        url,
      },
      {
        operation: 'output',
        format: 'webp',
      },
    ];
    const ops = encodeURIComponent(JSON.stringify(operations));
    const reqOps = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
      }
    }
    const endpoint = `https://us-central1-**.cloudfunctions.net/ext-image-processing-api-handler/process?operations=${ops}`;
    return await fetch(endpoint).then((res) => res.json());
  }

The frontend returns this error

Access to fetch at 'https://us-central1-***.cloudfunctions.net/ext-image-processing-api-handler/process?operations=%5B%7B%22operation%22%3A%22input%22%2C%22type%22%3A%22url%22%2C%22url%22%3A%22https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2F***.appspot.com%2Fo%2Fimages%252Fcms-images%252FScreenshot%25202023-03-28%2520at%25205.32.09%2520PM.png.png%3Falt%3Dmedia%26token%3D7c85c1a0-9c84-4b94-af76-182e48749a5a%22%7D%2C%7B%22operation%22%3A%22output%22%2C%22format%22%3A%22webp%22%7D%5D' from origin 'http://localhost:4200' 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.

google cloud logs show this error

Unable to fetch image from url "https://firebasestorage.googleapis.com/v0/b/habitat-commons-cms.appspot.com/o/images/cms-images/Screenshot 2023-03-28 at 5.32.09 PM.png.png?alt=media&token=7c85c1a0-9c84-4b94-af76-182e48749a5a", the url returned a non-successful status code of "400". The returned error was: Request failed with status code 400

[LikitSaeLee]

hit the same problem, it would be nice to be able to set the 'Access-Control-Allow-Origin' header

[LeeMatthewHiggins]

There is an option on setup for this. But the default of * is not working for me. This is important feature for flutter web.

[LeeMatthewHiggins]

There is an option on setup for this. But the default of * is not working for me. This is important feature for flutter web.

further investigation and it seems you are missing the correct response on an OPTIONS request. The options request needs to return the correct cors headers else a get will never be attempted by many browser apps.

Explained well here: https://dev.to/didof/cors-preflight-request-and-option-method-30d3

[vincentderidder]

@ohabash did you find a solution?

[LeeMatthewHiggins]

Using https://imgix.com/ instead :(

[ohabash]

had to use www.imageKit.com. ran out of time to solve this

[gmarizy]

The error might come from this line: https://github.com/invertase/firebase-extensions/blob/ef90ddf3820edb387f25a1968eeeb808d7061d6a/extensions/image-processing-api/functions/src/index.ts#L116

OPTIONS isn't in the list, meaning that preflight CORS request can't succeed. Don't known if calling Image Processing API trigger simple or preflight CORS request though.