Custom type API withi react front application

Developing with Prismic
1

CORS with custom type API

Hello,
While using curl or postman, this call works just fine :

curl --location 'https://customtypes.prismic.io/customtypes/xxx' \ --header 'repository: xxx-store'

But when calling it from React via the browser, it fails with CORS issue.
It seems custom types API should not be used in front but only in backend applications.

My need is to retrieve "options" of a select field of a custom type.

My questions are :

  • Is it possible to get custom types defintion in frontend application
  • If not, is there any way to retrieve those options ?

Thanks.

Sylvain

3

Hi Sylvain,

You’re correct that the Prismic Custom Types API is intended for backend usage only and will generally fail with CORS errors when called directly from a frontend application in the browser. This is by design to secure sensitive operations and prevent exposing API keys directly in frontend code.

Addressing Your Questions:

  1. Is it possible to get custom type definitions in a frontend application?

    • No, not directly. The Custom Types API is protected and isn’t designed for frontend access due to CORS restrictions. If you attempt to call it from the browser, the API’s CORS policy will block the request.

  2. Is there any way to retrieve those options?

Yes, you can retrieve the options, but it requires implementing a workaround that respects Prismic’s security design.

Here are a few approaches:

Option 1: Retrieve via a Backend Proxy

  1. Create a backend endpoint:
  • Use a server-side function (Node.js, Python, etc.) or a serverless function (AWS Lambda, Vercel, Netlify, etc.) as a proxy.
  • This server-side function will:
  • Authenticate with the Prismic Custom Types API.
  • Fetch the select field options from the custom type definition.
  • Return this data to the frontend.
  1. Frontend fetches from your backend:
  • Your React app calls this backend endpoint instead of the Custom Types API directly.

Example Backend Function (Node.js):

const axios = require('axios');

const fetchCustomTypeOptions = async (req, res) => {
    const repository = "xxx-store"; // Replace with your repository
    const url = `https://customtypes.prismic.io/customtypes/xxx`;

    try {
        const response = await axios.get(url, {
            headers: { repository },
        });
        // Extract the select field options
        const options = response.data.fields.select_field.options;
        res.json(options);
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: 'Failed to fetch custom type options' });
    }
};

module.exports = fetchCustomTypeOptions;

Option 2: Use Prismic Content Queries Instead

If your “select field” is linked to published content (e.g., dynamic categories or tags), you can retrieve the options via the Prismic Content Query API instead of the Custom Types API:

  • Query documents in your repository.
  • Extract the data for the select field directly from the content.

Example using Prismic’s GraphQL/REST API:

const apiEndpoint = 'https://your-repository-name.cdn.prismic.io/api/v2';
const optionsField = 'your_custom_type.data.select_field';

fetch(`${apiEndpoint}/documents/search?ref=${ref}&q=[[at(my.${optionsField})]]`)
    .then(response => response.json())
    .then(data => {
        const options = data.results.map(doc => doc.data.select_field);
        console.log(options);
    });

Option 3: Hardcode Options in Your Frontend

If the select field options are static and unlikely to change, you can hardcode them directly in your React app. While this is less dynamic, it simplifies implementation for scenarios where the options don’t need to be fetched dynamically.

Summary

  • Use a backend proxy if you need to access the Custom Types API securely.
  • Consider querying published content instead, if applicable.
  • Hardcode options for simplicity if they are static.