How to Configure Vercel with Cloudflare

Understanding the ACME protocol and SSL/TLS Encryption settings
Adrian MacneilAdrian Macneil ·
5 min read
Published
How to Configure Vercel with Cloudflare

At Foxglove, we leverage Vercel to host our marketing website and Cloudflare to reap other benefits like URL rewrites. This allows us to host different parts of our website from separate repositories—for example, we generate our homepage and API docs from separate projects.

When introducing Cloudflare in front of Vercel, however, Vercel returned an “Invalid Configuration” error for our domain. Ignoring this problem could lead to an expired TLS certificate and interrupted service for our users. Unfortunately, the only solution offered was to point our DNS records to Vercel directly – something that would require us to move away from Cloudflare altogether.

Vercel error

Maintaining HTTPS protection in Cloudflare

Contrary to what many online resources and the Vercel docs themselves advise, you should not resolve this issue by disabling Always Use HTTPS. We felt it important to maintain automatic HTTPS protection across our entire domain and redirect all HTTP requests to HTTPS.

Cloudflare HTTPS

Understanding the role of ACME

Both Cloudflare and Vercel utilize the ACME protocol—with SSL providers like Let’s Encrypt—to issue certificates. To validate domain ownership, the protocol sends an HTTP (not HTTPS) request to /.well-known/acme-challenge/<id> on your server.

It's vital that the HTTP URLs matching this pattern are delivered to your origin server and are not redirected to HTTPS. Instead of setting up Cloudflare page rules exempting this URL pattern from HTTPS, as previously required, you can now rely on Cloudflare to correctly handle ACME HTTP requests by default, without additional configuration.

The example below shows two requests—one being redirected to HTTPS, and the second one being passed through to the Vercel origin, without additional configuration:

$ curl -I http://foxglove.dev/.well-known/foo
HTTP/1.1 301 Moved Permanently
Date: Fri, 19 May 2023 02:33:39 GMT
Connection: keep-alive
Cache-Control: max-age=3600
Expires: Fri, 19 May 2023 03:33:39 GMT
Location: https://foxglove.dev/.well-known/foo
X-Content-Type-Options: nosniff
Server: cloudflare
CF-RAY: 7c98efb74b9015ac-SJC

$ curl -I http://foxglove.dev/.well-known/acme-challenge/bar
HTTP/1.1 404 Not Found
Date: Fri, 19 May 2023 02:33:41 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
Access-Control-Allow-Origin: *
Age: 19369
Cache-Control: public, max-age=0, must-revalidate
Content-Disposition: inline; filename="404"
Content-Security-Policy: default-src 'self';
Referrer-Policy: no-referrer-when-downgrade
Strict-Transport-Security: max-age=63072000
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-Matched-Path: /404
X-Vercel-Cache: HIT
X-Vercel-Id: sfo1:sfo1::5mxnh-1684463621350-028b60eca0ad
X-Xss-Protection: 1; mode=block
CF-Cache-Status: DYNAMIC
Server: cloudflare
CF-RAY: 7c98efc11bd715b0-SJC

Resolving the “Invalid Configuration” issue

Unfortunately, even after attempting various page rule modifications, we found that Vercel was still unhappy. To satisfy Vercel, we ultimately had to set the SSL/TLS encryption mode in Cloudflare to Full or Full (strict), and no higher.

Cloudflare TLS Mode

We initially had this set to Strict (SSL-Only Origin Pull), but this proved incompatible with Vercel. The Strict (SSL-Only Origin Pull) setting transforms all requests to the origin (Vercel) from HTTP to HTTPS—even if the request to Cloudflare is using HTTP. This transformation occurs silently, causing Vercel to disregard the request. By setting it to Full (strict), Cloudflare will automatically exempt ACME requests from the Always Use HTTPS setting and forward them through to Vercel unmodified.

The Vercel docs suggest setting the SSL/TLS encryption mode to Full, but have not been updated to explicitly mention avoiding the new Strict (SSL-Only Origin Pull) option as of this time.

Check out the the two example HTTP requests below to understand the effects of modifying this setting. The first request returns various Content-Security-Policy and other headers from Vercel’s CDN, while the second responds with fewer headers, signifying that it's reached Vercel’s ACME validation endpoint:

$ curl -I http://foxglove.dev/.well-known/acme-challenge/foo
HTTP/1.1 404 Not Found
Date: Fri, 19 May 2023 02:33:41 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
Access-Control-Allow-Origin: *
Age: 19369
Cache-Control: public, max-age=0, must-revalidate
Content-Disposition: inline; filename="404"
Content-Security-Policy: default-src 'self';
Referrer-Policy: no-referrer-when-downgrade
Strict-Transport-Security: max-age=63072000
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-Matched-Path: /404
X-Vercel-Cache: HIT
X-Vercel-Id: sfo1:sfo1::5mxnh-1684463621350-028b60eca0ad
X-Xss-Protection: 1; mode=block
CF-Cache-Status: DYNAMIC
Server: cloudflare
CF-RAY: 7c98efc11bd715b0-SJC

$ curl -I http://foxglove.dev/.well-known/acme-challenge/foo
HTTP/1.1 404 Not Found
Date: Fri, 19 May 2023 02:37:08 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 52
Connection: keep-alive
Access-Control-Allow-Headers: Authorization, Accept, Content-Type
Access-Control-Allow-Methods: OPTIONS, GET, POST, PUT, PATCH, DELETE
Access-Control-Allow-Origin: *
X-Vercel-Id: sfo1::fq2qw-1684463828229-cfd186e74a69
CF-Cache-Status: DYNAMIC
X-Content-Type-Options: nosniff
Server: cloudflare
CF-RAY: 7c98f4ce4aaa97ee-SJC

In summary, if you're looking to make Vercel and Cloudflare play nicely together, avoid setting your Cloudflare SSL mode to Strict (SSL-Only Origin Pull). With this one essential configuration detail, you can prevent any unnecessary interruptions to your services.


Read more:

Announcing MCAP Metadata and Attachments Support
article
data management
Announcing MCAP Metadata and Attachments Support

Use Foxglove Data Platform to import and export MCAP files with metadata records and attachments

Esther WeonEsther WeonEsther Weon
3 min read
Introducing Foxglove Studio's New Navigation
article
visualization
Introducing Foxglove Studio's New Navigation

Load data, build layouts, and configure panels with the new streamlined interface

Esther WeonEsther WeonEsther Weon
1 min read

Get blog posts sent directly to your inbox.

Ready to try Foxglove?

Get started for free