Accessing Resources

It is natural that your application requests your APIs or fetches images displayed in your app. Unfortunately, your browser is likely to block these requests based on the Cross-Origin Resource Sharing (CORS) policy.

This guide helps you to get these problems resolved. We host all the Widgetbooks under the domain hosting.widgetbook.io. To make requests from your hosted app, your service has to allow our domain.

Google Storage#

The Google Storage docs Configure cross-origin resource sharing (CORS) describe in detail how to set this up. But you can also use the steps below.

Ensure you are not overriding any previous settings by looking up what's already configured for your bucket: gsutil cors get gs://BUCKET_NAME. If you just created the bucket, the command will return an empty result.

A new configuration can be set with gsutil cors set CORS_CONFIG_FILE gs://BUCKET_NAME.

The config cors-config.json file might look like this:

[
  {
    "origin": ["https://hosting.widgetbook.io"],
    "method": ["GET", "HEAD"],
    "responseHeader": ["Content-Type"],
    "maxAgeSeconds": 3600
  }
]

Use gsutil cors set cors-config.json gs://BUCKET_NAME to apply the new configuration.

It might take some time until the new configuration is active. If you want to try the new configuration, empty the browser cache.

Amazon S3#

To configure CORS on Amazon S3, follow Amazon's guide on How Do I Add Cross-Domain Resource Sharing with CORS?. Alternatively, you can use the steps below.

1. Sign in to the Amazon S3 Console.
2. Choose the bucket name you want to enable CORS in the Bucket name list.
3. Choose the Permissions tab.
4. Scroll down to the Cross-origin resource sharing (CORS) section and click Edit.
5. Enter a new CORS rule, or modify an existing one. The configuration might look like this:

  <CORSConfiguration>
    <CORSRule>
      <AllowedOrigin>https://hosting.widgetbook.io</AllowedOrigin>
      <AllowedMethod>GET</AllowedMethod>
      <AllowedMethod>HEAD</AllowedMethod>
      <MaxAgeSeconds>3600</MaxAgeSeconds>
      <AllowedHeader>Content-Type</AllowedHeader>
    </CORSRule>
  </CORSConfiguration>

6. Click Save to apply the new CORS configuration.
7. It might take some time until the new configuration is active. To test the new configuration, make sure to empty the browser cache.

By following these steps, you should be able to configure CORS for your resources on Amazon S3 and allow access from your hosted Widgetbook on hosting.widgetbook.io.