Multiple origins for Access-Control-Allow-Origin in vercel.json?

Help
1

Question

vercel.json is a static file. I need to allow a static website to allow multiple origins, for example example.com and subdomain.example.com.

With a dynamic server, we can dynamically generate a single origin value for Access-Control-Allow-Origin.

But how do we do this for a static website with vercel.json?

I read the docs here:

and here:

but neither of them specify how to allow a list of origins. I would assume that Vercel would run logic that sends the correct Access-Control-Allow-Origin header based on which origin is visiting a page.

2

Hi @trusktr, welcome to the Vercel Community!

I’d recommend reading our Different ways to handle CORS on Vercel post.

But more specifically, if you need dynamic values for the allowed origins, you can use the Edge Middleware from Vercel, which is basically adding a middleware.ts file to the root of your project. There’s an example for that in the post I shared about.

I hope this was helpful.

3

I’ve already seen the configuration file. The configuration allows hard coding a single origin:

        {
          "key": "Access-Control-Allow-Origin",
          "value": "https://rrv7.vercel.app"
        },

This is insufficient. We need to configure multiple origins.

For static deployments, anything other than the config file is overkill.

Can you please allow multiple origins to be specified in the config file?

Is the code for this in a public repo? If so I may be able to add it.

4

Hi @trusktr, I understand your concern. I think you can use the has field of the header-object-definition to add multiple variations of response headers as follows:

{
    "headers": [
        {
            "source": "/(.*)",
            "has": [
                {
                    "type": "header",
                    "key": "Origin",
                    "value": "https://example.com"
                }
            ],
            "headers": [
                {
                    "key": "Access-Control-Allow-Origin",
                    "value": "https://example.com"
                },
                {
                    "key": "Access-Control-Allow-Credentials",
                    "value": "true"
                },
                {
                    "key": "Access-Control-Allow-Methods",
                    "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT"
                }
            ]
        },
        {
            "source": "/(.*)",
            "has": [
                {
                    "type": "header",
                    "key": "Origin",
                    "value": "https://subdomain.example.com"
                }
            ],
            "headers": [
                {
                    "key": "Access-Control-Allow-Origin",
                    "value": "https://subdomain.example.com"
                },
                {
                    "key": "Access-Control-Allow-Credentials",
                    "value": "true"
                },
                {
                    "key": "Access-Control-Allow-Methods",
                    "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT"
                }
            ]
        }
    ]
}
2 Likes
5

Ah, I think that will work I hadn’t realized that.

1 Like
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.