7 Common Mistakes Developers Make with CORS (and How to Avoid Them)

Let's face it: CORS errors are a real headache for almost every developer. If you're sick of your app breaking because of some weird CORS error, you're not alone. We're diving straight into seven common mistakes developers keep making with CORS and how to avoid each one.

CORS Error

1. Forgetting to Put the Access-Control-Allow-Origin Header

This issue is common for those who develop full-stack, frontend, and backend applications. You just finished your API, but when you try to call it from your frontend, you get a CORS error. This happens because your frontend and backend are running on different origins.

Definition of Origin:

• Origin consists of the scheme, hostname, and port.
• For example, if your frontend is at localhost:3000 and your backend is at localhost:8000, then they are considered different origins.

Origin structure

Solution:

Add your allowed origins to the server configuration. For example, in Express:

const express = require("express");
const cors = require("cors");
const app = express();

app.use(
  cors({
    origin: ["http://localhost:3000"], // Add allowed origins here
  })
);

Configuring allowed origin

2. Putting the Access-Control-Allow-Origin Header in the Request

This is another common mistake. When you see an error stating that “Access-Control-Allow-Origin” is not present in the header, some developers mistakenly try to add this header to the request. Unfortunately, this does not work because the Access-Control-Allow-Origin header is controlled by the server, not the client.

fetch("http://example.com/data", {
  headers: {
    "Access-Control-Allow-Origin": "*",
  },
});

The Access-Control-Allow-Origin is ignored in the request

Solution:

Ensure that the server includes the Access-Control-Allow-Origin header in its response.

Access-Control-Allow-Origin: your-origin.com

Access-Control-Allow-Origin header

3. Using mode: "no-cors"

Another mistake is using mode: "no-cors". The error message might suggest that if an opaque response suits your needs, you can set the request mode to no-cors to fetch the resource with CORS disabled. However, when you use this mode, you won’t be able to read the response, it remains opaque.

fetch("http://example.com/data", {
  mode: "no-cors",
})
  .then((response) => {
    // Note: response is opaque and you cannot access its body
    console.log("Response received:", response);
  })
  .catch((error) => {
    console.error("Fetch error:", error);
  });

Example of using fetch with mode: "no-cors"

Solution:

If you don’t need the response, then mode: "no-cors" might work for you. But if you need to read the response, remove the mode: "no-cors", and ensure the API or resource you’re fetching include the appropriate CORS headers.

4. Reading from a Tainted Canvas

This issue affects developers working with the HTML5 canvas. You can usually load an image into the canvas using ctx.drawImage from an image source. However, when you try to retrieve or read the canvas, you might get an error stating that the canvas is tainted. This occurs because the image is a cross-origin resource loaded without CORS.

Tainted cavas error

Solution:

Add the crossorigin="anonymous" attribute when loading the image. This ensures that the image is loaded using CORS and prevents the canvas from being tainted.

<img
  src="http://example.com/image.jpg"
  crossorigin="anonymous"
  alt="Image description"
/>

Loading image with crossorigin="anonymous"

5. Not Handling the Preflight Request

When using fetch with CORS, the browser sends an OPTIONS request (a preflight request) before the actual request. If your server doesn’t handle this OPTIONS request, the actual request won’t be processed.

Preflight request process

Solution:

Make sure your server handles OPTIONS requests for your endpoints and that these responses include the appropriate CORS headers.

6. Using “Unblock CORS” Browser Extensions

Many online resources suggest using a browser extension to unblock CORS as a quick fix. However, this is only a temporary solution since your website will work only on your local machine and not in production. Moreover, using such an extension might expose you to risks that the same-origin policy is designed to protect against.

Browser extensions for unblocking CORS

Solution:

Avoid relying on browser extensions to unblock CORS. Instead, use the proper server-side configurations or other reliable solutions mentioned above.

7. Trying to Access an API That Doesn’t Support CORS

This one is particularly frustrating. You might have a cool idea that involves using some API or resource, but when you try to fetch it, it fails. This is because the API or resource does not include the CORS header, it is up to the owner to explicitly allow access from your origin.

Solution:

You can still get around this limitation, by using a CORS proxy, such as Corsfix. It works by fetching the data on your behalf and returning it to you with the necessary CORS headers. This way, you can access the data you need without any issues.

CORS Proxy flow

Learn more about CORS proxy in our CORS Proxy: Everything You Need to Know article.

Conclusion

We covered some of the most common mistakes developers make with CORS. If you find yourself encountering any of these issues, now you have the solutions to address them.

If you need a quick fix for CORS errors, you can try Corsfix, a reliable CORS proxy that lets you access any resource you need without the hassle. Sign Up for Free to get started, and when you're ready for production, check out our plans that suit your needs.

Comments

[reynaldi]

which of these have you done in the past? let me know in the comments below