Configure CORS for REST API access

This guide shows how to configure Cross-Origin Resource Sharing (CORS) so that browser-based frontend applications can access the Plone REST API from a different origin.

CORS support is provided by plone.rest and is configured through cookiecutter-zope-instance settings.

Step 1: enable CORS

By default, CORS is disabled. Enable it in your instance.yaml:

default_context:
    cors_enabled: true

Step 2: configure allowed origins

Specify which origins may access your Plone site:

default_context:
    cors_enabled: true
    cors_allow_origin: "https://frontend.example.com"

For multiple origins, use a comma-separated list:

default_context:
    cors_allow_origin: "https://frontend.example.com,https://admin.example.com"

Use * to allow all origins (not recommended for production):

default_context:
    cors_allow_origin: "*"

Example: Volto development setup

When developing with Volto (the default Plone 6 frontend), the React dev server typically runs on http://localhost:3000. The default CORS origin settings already cover this:

default_context:
    initial_user_name: admin
    initial_user_password: admin

    zcml_package_includes: my.site.addon
    db_storage: direct

    # CORS for Volto dev server
    cors_enabled: true
    cors_allow_origin: "http://localhost:3000,http://127.0.0.1:3000"
    cors_allow_credentials: true
    cors_allow_headers: "Accept,Authorization,Content-Type"
    cors_allow_methods: "DELETE,GET,OPTIONS,PATCH,POST,PUT"

Tip

The default value for cors_allow_origin is already http://localhost:3000,http://127.0.0.1:3000, so for local Volto development you only need to set cors_enabled: true.

Example: production with specific domains

default_context:
    cors_enabled: true
    cors_allow_origin: "https://www.example.com,https://cms.example.com"
    cors_allow_credentials: true
    cors_allow_headers: "Accept,Authorization,Content-Type"
    cors_allow_methods: "DELETE,GET,OPTIONS,PATCH,POST,PUT"
    cors_expose_headers: "Content-Length"
    cors_max_age: 3600

Next steps

• CORS – Full reference for all CORS configuration options.