Getting cors error while calling faceLandmarksDetection.createDetector

[Arijit Hazra]

I could not find the issue section in tfjs-models, so I am posting my issue here:-

System information

• OS Platform and Distribution (e.g., Linux Ubuntu 20.04)
• Mobile device (e.g. iPhone 8, Pixel 2, Samsung Galaxy) if the issue happens on mobile device:
• Packages added through yarn add
• packages used - (@tensorflow-models/face-landmarks-detection, @tensorflow/tfjs-core, @tensorflow/tfjs-backend-webgl, @mediapipe/face_mesh)
• CUDA/cuDNN version: No gpu
• package related to issue: tfjs-models/faceLandmarksDetection

Imports in my react code:

import "@tensorflow/tfjs-core";
import "@tensorflow/tfjs-backend-webgl";
import "@mediapipe/face_mesh";

Model loading part

const faceapi_model =
      faceLandmarksDetection.SupportedModels.MediaPipeFaceMesh;
    const detectorConfig = {
      runtime: "tfjs"
    };
    const model_setter = async () => {
      const detector = await faceLandmarksDetection.createDetector(
        faceapi_model,
        detectorConfig
      );
      setModel(detector);
    };

Error

Access to fetch at "https://tfhub.dev/mediapipe/tfjs-model/facemesh/1/default/1/model.json?tfjs-format=file" from origin "https://mydomain" has been blocked by CORS policy: the 'access-control-allow-origin' header has a value 'https://my-another-domain' which is not equal to the supplied value

My intuition

The API call is from https to https, so, I don't know why the error is coming.

What I found about the tfhub link is that it may be internally called by faceLandmarksDetection.createDetector():

export async function load(modelConfig: MediaPipeFaceDetectorTfjsModelConfig) {
  const config = validateModelConfig(modelConfig);

  const detectorFromTFHub = typeof config.detectorModelUrl === 'string' &&
      (config.detectorModelUrl.indexOf('https://tfhub.dev') > -1);

  const detectorModel = await tfconv.loadGraphModel(
      config.detectorModelUrl, {fromTFHub: detectorFromTFHub});

  return new MediaPipeFaceDetectorTfjs(
      config.modelType, detectorModel, config.maxFaces);
}

This load function is being used by the createDetector function.

What I have tried:

• I have tried mediapipe runtime as it has a different load function, though I am facing different error while using that ( I have given the solutionPath in config)
• I have tried to add the origins in my access-control headers in the server

It would be best if there is a way with which I can simply load the model in a local folder in my frontend, then, load the model and serve it.

[himi]

Hi @gaikwadrahul8 facing the same issue, this issue is very frequent and why is it so?

[John Miller]

Error message:

Access to fetch at 'https://www.kaggle.com/models/mediapipe/face-landmarks-detection/frameworks/tfJs/variations/face-mesh/versions/1/model.json?tfjs-format=file&tfhub-redirect=true' (redirected from 'https://tfhub.dev/mediapipe/tfjs-model/face_landmarks_detection/face_mesh/1/model.json?tfjs-format=file') from origin 'http://localhost:3000' 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.

I allowed all origins in the next.js config, but to my dismay the resource was STILL being blocked by cors.
I'm guessing those headers only apply to requests made in the next.js endpoints and client-side requests just set their own headers.

[Ajay Moorjani]

Anyone found a solution to this?

[Elintondm]

Any news? We have the same error here.

[christopherdec]

We changed the runtime from tfjs to mediapipe and this has solved the CORS problem.

Just follow the instructions from the README here: https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection/src/mediapipe

[John Miller]

We changed the runtime from tfjs to mediapipe and this has solved the CORS problem.

Just follow the instructions from the README here: https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection/src/mediapipe

Sadly, I was not able to get more than 10 FPS with the mediapipe version, so switching to mediapipe will worrk for some people, but not for all.

[John Miller]

I found an issue. In the screenshot, there is no Access-Control-Allow-Origin. That means it was never set up. Therefore, the solution to this problem must be to go into the server code and set up CORS origins.

If the maintainer of this project is AFK, then we might have to submit a PR ourselves that fixes this and use a forked version of the project with the fix while we wait for the PR to get merged. However, is the server code where I would modify CORS open source? I'm not familiar with tensorflow in that way

[John Miller]

This demo was working last Friday when I initially set this up, and now it too is having the exact same CORS error:
https://magdazelena.github.io/face-landmark-detection/

I doubt the demo upgraded any of its packages/dependencies, so whatever changed that is causing the CORS error is external to this tensorflow model.

[guaxez]

Same problem here. Is there a way to download the model and use from other source?