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

Skip to content

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

(edited)

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:

https://vercel.com/guides/how-to-enable-cors

and here:

https://vercel.com/docs/project-configuration#headers

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.

Vercel Staff

Hi , welcome to the Vercel Community!

I'd recommend reading our https://community.vercel.com/t/different-ways-to-handle-cors-on-vercel/5127 post.

Vercel Community

Different ways to handle CORS on Vercel

Cross-Origin Resource Sharing (CORS) issues are common when you are hosting your backend and frontend applications on different origins. Browsers implement...

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.

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.

Vercel Staff

Hi , 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"
                }
            ]
        }
    ]
}

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

This topic is closed. It no longer accepts new replies.