In this tutorial, you will learn how to enable CORS within your Umbraco V8. Configuring Umbraco in V8 is done using components. Components need to register using a composer. Imagine you are one website.com and you try to make an API request using AJAX to websitetwo.com. If you are the owner of websitetwo.com you may not want to give website.com your data. Publicly exposing end-points like this may make you a target for DDOS and a host of other nasty things.
In this tutorial, you will learn how to enable CORS within your Umbraco V8 powered website. If you are new to CORS, I will start with a quick introduction? Cross-Origin Resource Sharing(CORS) is a security standard that allows website implementers to decide who can access the data exposed by their APIs. Imagine you had a website and an API sharing the same domain, the website would be able to send an AJAX request to the API without a problem. Now imagine, a website hosted on a different domain calls the same API, what should happen? By default, CORS will only allow requests from the same domain to be made. All other requests to the origin will be blocked unless you explicitly allow them.
When an AJAX request is made, two requests are made, not one. The first request is called a preflight check. A preflight check is just a way for the client to confirm with the server that it is allowed to talk to it. The server can say yes or no. If the server says no, a no Access-Control-Allow-Origin header is set and an error is thrown within the client's browser.
By default, the server will block all requests that originate from a different domain. To make a domain trusted you can add it to the allowed origins list. Enabling and configuring CORS within Umbraco V8 is done via a component. If you are unsure on components and composers you can learn more here.
Configuring CORS in V8
Download and install this Nuget package:
In a normal .NET MVC application, you would enable CORS within the global.asax. Within UmbracoV8, you can create a component instead. Add this component to your project:
This code allows everything. Not ideal in terms of security. To be more specific on the domains that are allowed, you can swap the wildcard * from the origin property. Origins can be set using a comma-separated list of domains:
Also, another handy thing for you to note, is that the code above is doing the same as:
Fianlly, register your component using a composer like this:
That should be all, CORS should now work. Happy Coding!
