What is Cors-Origin?

A technique or protocol called Cross-Origin Resource Sharing (CORS) enables devices on one domain to access resources located on other domains.

Browsers typically block requests that come from beyond their own domain for security concerns. In some circumstances, you might want to get around this and access resources from different domains, and CORS makes this feasible.

What is Same-Origin Policy?

Another notion, called Same-Origin Policy (SOP), permits resource access on related domains. We'll talk about the SOP and how it contributes to website security in this guide. We will also go through how CORS increases the SOP's speed and versatility.

This means that if two domains want to share resources, their origins must be the same. The domain, port number, and protocol type of two websites must match for their origins to be the same. The sources are regarded as having separate origins if any one of the three qualities is discovered to be different.

Despite being a restrictive system, SOP is quite secure and prevents potential assaults on websites using cross-domain resources.

SOP provides protection for websites but may also be used as a meeting place to communicate with external websites.

What is Cross-origin Resource Sharing (CORS)?

The introduction of CORS enables rapid and simple access to subdomains and reliable third parties. As was previously mentioned, CORS provides controlled resource sharing between cross-domain origins.

In accordance with CORS requirements, the browser and the cross-origin website you are attempting to access exchange HTTP headers that specify trustworthy web origins and associated characteristics for access control.

CORS provides restricted access to websites that span domains and is therefore secure. CORS is typically used to address restrictions brought on by SOP. CORS can, however, pose serious security threats if it is implemented incorrectly. CORS configuration issues could lead to difficulties and mistakes.

Let's find out more about CORS mistakes and how to prevent them.

How to find the error?

You need to determine which request is problematic and why in order to comprehend the underlying problem with the CORS settings. You could do it by following these steps:

• Open browser developer tools and click Console if you see something like this when you are making the api request. You have the Cross origin issue.

How to enable CORS in your apps

You can use several steps to prevent this CORS errors ruining your app.

Fix 01:

By include the following in a.htaccess file in your app's web root directory (public), you can allow sending CORS headers from your app:

• You can set a specific url by using this Origin: Access-Control-Allow-Origin: http://localhost:3000 or you can make all urls enabled by using this Access-Control-Allow-Origin: *

Fix 02:

There are plenty of google extensions available to prevent CORS errors from occurring. By installing one of those browser extension can easily solve your problem.

But keep this in mind, this is not the ideal solution and this is not practical when you deploy your application because can we ask our client to install a browser extension to run our app 😂

Fix 03:

By building a middleware/proxy we can prevent CORS errors. This is the best solution among all the solutions that are mentioned above. Following code snippet is an example how you can use a simple node middleware to overcome CORS errors.

How does that function? Every response from the server receives an Access-Control-Allow-Origin: * header thanks to the proxy's use of express middleware. The proxy requests a response another server at its own /random GET endpoint. The request is not blocked by the same-origin policy despite the fact that the domains are distinct. This is a server-to-server request, after all. The resultant data and the Access-Control-Allow-Origin: * header are then created by the proxy and sent back to the original requester (a browser app).

Conclusion

The frontend developer may suffer greatly from the CORS error. However, it gets a little more tolerable once you comprehend the underlying same-origin policy that is responsible for the mistake and how it defends against the malicious cross-site request forgery attack.

Finally, thanks to all these fixes, you won't ever have to worry about running into a red CORS error in your browser console logs. Instead, you'll pull out the plugin or a proxy and declare in its face: