How to enable API requests in Fresh

Published on 06/07/2023, 418 words, 2 minutes to read

We can't trust browsers because they are designed to execute arbitrary code from website publishers. One of the biggest protections we have is Cross-Origin Request Sharing (CORS), which prevents JavaScript from making HTTP requests to different domains than the one the page is running under.

<Mimi>

Cross-Origin Request Sharing (CORS) is a mechanism that allows web browsers to make requests to servers on different origins than the current web page. An origin is defined by the scheme, host, and port of a URL. For example, https://example.com and https://example.org are different origins, even though they have the same scheme and port.

The browser implements a CORS policy that determines which requests are allowed and which are blocked. The browser sends an HTTP header called Origin with every request, indicating the origin of the web page that initiated the request. The server can then check the Origin header and decide whether to allow or deny the request. The server can also send back an HTTP header called Access-Control-Allow-Origin, which specifies which origins are allowed to access the server's resources. If the server does not send this header, or if the header does not match the origin of the request, the browser will block the response.

Fresh is a web framework for Deno that enables rapid development and is the thing that I am rapidly reaching to when developing web applications. One of the big pain points is making HTTP requests to a different origin (such as making an HTTP request to api.example.com when your application is on example.com). The Fresh documentation doesn't have any examples of enabling CORS.

In order to customize the CORS settings for a Fresh app, copy the following middleware into routes/_middleware.ts:

// routes/_middleware.ts

import { MiddlewareHandlerContext } from "$fresh/server.ts";

export async function handler(
  req: Request,
  ctx: MiddlewareHandlerContext<State>
) {
  const resp = await ctx.next();
  resp.headers.set("Access-Control-Allow-Origin", "*");
  return resp;
}

If you need to customize the CORS settings, here's the HTTP headers you should take a look at:

This should fix your issues.

Facts and circumstances may have changed since publication. Please contact me before jumping to conclusions if something seems wrong or unclear.

Tags: fresh, deno, preact