CORS Policy Error and Working Around It
Have you ever seen this…
This console error causes many a front-end developer to groan. So what the heck is a CORS exception and why does it matter? And while it shares the pronunciation, it has nothing to do with Coors beer.
CORS stands for Cross-Origin Resource Sharing. When certain network requests are made, such as making an API GET request for data from a server, there is often a preflight check prior to getting the data, part of which checks that the server will permit the sending of the data. When the server is in a separate place from the requestor, also known as a separate domain, then there will be Cross-Origin Resource Sharing. When data isn’t publicly accessible, servers will only allow requests to come from certain explicitly stated domains. Requests that don’t, will receive a CORS policy error.
CORS is something that aids in security. For example, what if instead of returning a file of the latest company product from the trusted company domain, a file including a nasty virus is served up? A good CORS policy could prevent this from happening. Bottom line is it’s generally a good thing to see this error, as it’s the browser keeping its user safe from potential malicious attacks.
Ok, so how come a front-end developer would come in contact with this error, and why might it happen after changing environments or after a service refactor? If a developer is working on a monolithic architecture of code, where all the code lives in the same domain, then the browser recognizes all this code is coming from the same spot which is expected. Therefore, no error. But once back-end code and front-end code is separated into their own service (otherwise known as “Microservices Architecture”), now the back-end server code may live in one domain and the front end in another. Now we have the right condition for a CORS exception.
Hang on, if Microservices is a specific type of architecture with the code being able to live in different spots, why this error? Shouldn’t it be allowed as part of the design? Well, yes! However, there needs to be something in place that allows the code to be sent to the correct application so the safety that comes along with the CORS exception is still in place. Code can be added to create an “allow list”, however this code is added on the server-side, and not on the front-end. Different environments such as dev and qa, will often have different URLS that will each need to be added. Hence why sometimes all seems well in one environment but then this error can appear when changing to another environment. In most cases, this is an easy change. Even if it’s a different developer, it’s usually a simple conversation to get the code added.
But what happens if it’s a large company and the server-side code resides with a different team? Hopefully it’s still a relatively simple process, but it still can take approval and might have to coincide with a release cycle, or perhaps there’s other factors that may make the change take a while to get in place. While it must be in place before a production launch, development doesn’t have to stop.
When it comes time, there are several free browser extensions that can be used to test developers code until the CORS policy code can be added. Even QA and other personnel can be shown how to use it. The key is to make sure it’s turned off, and better yet, uninstalled after testing is complete. After all, when it’s enabled, it means that the browser is no longer safe from CORS attacks and could be put at risk. Some extensions even let the user put in an allow list. It’s much better to use this setting rather than say “All Request at any website”. For one, we’re all human, and inevitably someone will leave the extension enabled and go about their regular browser activity.
Here’s a simple step-by-step guide to using a third-party extension in Microsoft Edge. Again, there are plenty of examples and there’s no reason to feel this specific third-party option is better than others.
1. Open up Edge, click the ellipses in the upper right-hand corner, and select “Extensions”.
2. Click the link to go to the “Chrome Web Store”.
3. If prompted, click “Allow extensions from other stores” and then “Allow” from the popup.
4. Make sure “Extensions” is selected, enter “allow CORS” and hit enter.
5. Select “Allow Cors: Access-Control-Allow-Origin”.
6. Click “Add to Chrome” (yes, even if you’re using Microsoft Edge).
7. Click “Add extension”.
8. Click the extensions button and click the icon shown below for this extension to show in the toolbar.
9. This next step is optional, but highly recommended. Click on the C icon and select “Open options page” and scroll down to the Allow CORS whitelisted domain(s) section and add the URLs for all the environments that have the CORS errors.
Conclusion
Now testing can be completed as if everything were set up correctly. Again, it’s important to make sure things get set up correctly in the long run as this does pose a security risk and also is not acceptable in production (among the security concerns, you simply cannot expect a customer to use this type of work-around in order to interact with your website).
About Intertech
Intertech is a Software Development Consulting Firm that provides single and multiple turnkey software development teams, available on your schedule and configured to achieve success as defined by your requirements independently or in co-development with your team. Intertech teams combine proven full-stack, DevOps, Agile-experienced lead consultants with Delivery Management, User Experience, Software Development, and QA experts in Business Process Automation (BPA), Microservices, Client- and Server-Side Web Frameworks of multiple technologies, Custom Portal and Dashboard development, Cloud Integration and Migration (Azure and AWS), and so much more. Each Intertech employee leads with the soft skills necessary to explain complex concepts to stakeholders and team members alike and makes your business more efficient, your data more valuable, and your team better. In addition, Intertech is a trusted partner of more than 4000 satisfied customers and has a 99.70% “would recommend” rating.
