How to Fix CORS Errors in Web Applications

We’ve all been there, cursing because of CORS. You make an HTTP request only to be greeted by a frustrating error message in your browser. With this short article, I want to show you how to fix CORS errors in web applications.

CORS explained in short Link to heading

Cross-Origin Resource Sharing (CORS) is a mechanism that allows web browsers or other web clients to make cross-origin requests, which are normally prohibited by the Same-Origin Policy (SOP). CORS is a compromise that provides greater flexibility on the Internet while maintaining high security measures. The Same-Origin Policy (SOP) is a security feature implemented by web browsers that restricts web pages from making requests to a different origin than the one that served the web page. In simple terms, SOP prevents malicious web pages from stealing data or executing actions on behalf of a user without their knowledge or consent.

Some easy theory Link to heading

CORS is basically a client asking a server

Hey, I know I am not from here but I would like to read (or write) some data, can I do that?

And the server responds with

Yeah, my admin already told me that guys like you might come by, so it’s okay.

So it’s a server configuration issue and if you don’t control the server, you can’t fix the problem!

CORS error when requesting resources with a different origin and incorrect server configuration

But how to fix it? Link to heading

Simple, just add the header Access-Control-Allow-Origin to your server configuration

access-control-allow-origin: *

This means that requests from any origin are allowed. You can either specify a single origin URL or use the * value as a wildcard.

Sometimes, you also want to restrict the allowed HTTP methods that clients can use. The header field Access-Control-Allow-Methods is your friend.

access-control-allow-methods: GET, PUT, OPTIONS

The specific steps for adding these header fields depend on the type of server you are running. However, you can find the answer on the internet, and ChatGPT may even be able to assist you with that.

Conclusion Link to heading

In this article, you learned how to fix CORS errors in web applications. Once you know the theory behind the scenes, it’s easier to understand and won’t cause you big trouble in the future.

Can’t use your pipeline in Azure DevOps with .NET7? Here is a solution! Link to heading

After upgrading your app to a newer .NET version the cloud build agent of Azure DevOps fails. Here is what you can do against it!

How to fix a broken branch after a git merge or git rebase Link to heading

This guide shows you how you can create a new branch with the original changes of your broken branch.

How to Fix Missing Documentation in SwaggerUI of your .NET WebApi Project Link to heading

Your .NET WebApi project is up and running but the SwaggerUI doesn’t show the XML documentation of your code? Here is an easy fix!

Cross Origin Resources Sharing can be a huge pain. So here is how to fix CORS errors in web applications. Link to heading