TensorFlowJs & Google Storage | CORS Error with tf.loadLayersModel

Question

I created a basic model with TensorFlow and converted the model to TensorFlowJs with: tfjs.converters.save_keras_model(model, './jfk_ewr') and saved the converted model in google storage bucket.

When loading the model with 'Example 1' ("Load a model from an HTTP server") from the following link: https://js.tensorflow.org/api/latest/#loadLayersModel I get a CORS error.

model = await tf.loadLayersModel('https://console.cloud.google.com/storage/browser/jfk/ewr/model.json');

Error: Access to fetch at 'https://console.cloud.google.com/storage/browser/jfk/ewr/model.json' from origin 'null' 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.

JKleinne JKleinne · Accepted Answer · 2019-07-19T21:36:14

Browsers enforce the same-origin policy in which a request to resources from different origins are prevented. In your case, the same-origin policy is enforced when trying to fetch your model stored in Google Cloud Storage from an unknown origin.

Therefore, you can either properly configure CORS or have it simply disabled. In this specific case, you can configure the Google Cloud Storage bucket to allow resource requests between the bucket containing your TensorFlow model and the HTTP server making said request.

For illustrative purposes, let’s say we wanted to fetch the TensorFlow model from the http://www.example.com server. Following the Google Cloud Storage documentation on configuring CORS [1], we first would create a .json file that contains all the necessary configuration information regarding which origin(s) will be allowed to perform CORS requests. In the example above, it would look something like this:


[
    {
      "origin": ["http://www.example.com"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

Running gsutil cors set cors.json gs://example-bucket from the command line with the Cloud SDK installed [2] will then configure CORS between your bucket and the server.

TensorFlowJs & Google Storage | CORS Error with tf.loadLayersModel

1 Answers