Cadey is coffee
<Cadey> Hello! Thank you for visiting my website. You seem to be using an ad-blocker. I understand why you do this, but I'd really appreciate if it you would turn it off for my website. These ads help pay for running the website and are done by Ethical Ads. I do not receive detailed analytics on the ads and from what I understand neither does Ethical Ads. If you don't want to disable your ad blocker, please consider donating on Patreon or sending some extra cash to xeiaso.eth or 0xeA223Ca8968Ca59e0Bc79Ba331c2F6f636A3fB82. It helps fund the website's hosting bills and pay for the expensive technical editor that I use for my longer articles. Thanks and be well!

How to enable API requests in Fresh

Read time in minutes: 3

hero image lemonade
SCMix -- 1girl, green hair, green eyes, long hair, kitchen, lemon, juicer, black hoodie

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 is happy
<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:

Header Use Example
Access-Control-Allow-Origin Allows arbitrary origins for requests, such as * for all origins. https://xeiaso.net, https://api.xeiaso.net
Access-Control-Allow-Methods Allows arbitrary HTTP methods for requests, such as * for all methods. PUT, GET, DELETE
Access-Control-Allow-Headers Allows arbitrary HTTP headers for requests, such as * for all headers. X-Api-Key, Xesite-Trace-Id

This should fix your issues.


This article was posted on M06 07 2023. Facts and circumstances may have changed since publication. Please contact me before jumping to conclusions if something seems wrong or unclear.

Series: howto

Tags: fresh deno preact

This post was not WebMentioned yet. You could be the first!

The art for Mara was drawn by Selicre.

The art for Cadey was drawn by ArtZora Studios.

Some of the art for Aoi was drawn by @Sandra_Thomas01.