How to Fix CORS Origin Error in Javascript

Introduction

Cross-Origin Resource Sharing (CORS) is a security mechanism implemented in web browsers to restrict resource sharing between different domains. While CORS plays an essential role in web security, it can also cause problems when you're trying to access resources from a different domain through JavaScript.

Original source of this article can be found in axxellance

If you're a developer working with JavaScript, you've likely encountered a CORS Origin error, which can be frustrating and time-consuming to fix. In this blog post, we'll explore what CORS is, why it's important, and how to fix the CORS Origin error in JavaScript. Whether you're a seasoned developer or just starting with JavaScript, this guide will help you understand CORS and provide you with actionable steps to resolve the CORS Origin error in your projects. So, let's dive in!

This is an example of a CORS error:

What is CORS

Cross-Origin Resource Sharing (CORS) is a security feature implemented in web browsers to protect against cross-site attacks by restricting resource sharing between different domains. In this blog post, we'll explore what CORS is and why it's important to understand, especially for web developers.

CORS works by enforcing the "same-origin” policy, which means that a web page can only access resources from the same domain as the page itself. This policy is in place to prevent malicious scripts on one site from accessing resources on another site. However, there are legitimate reasons why a web application may need to access resources from a different domain. In such cases, CORS allows a server to explicitly grant access to resources from a different domain.

CORS is crucial for web security as it prevents unauthorized access to sensitive data, such as user credentials or payment information. It also ensures that a web application can only access the resources it needs, preventing malicious scripts from accessing unnecessary resources.

In summary, CORS is a security feature that restricts resource sharing between different domains, enforcing the same-origin policy. It's essential to understand how CORS works and how to use it properly, especially if you're a web developer. By following best practices and understanding the importance of web security, you can ensure that your web applications are safe and reliable for users to interact with.

3 Ways to Fix The CORS Error in Web Browser

You will learn three effective ways to fix the CORS origin error in JavaScript. When you encounter a CORS origin error, it can be frustrating and time-consuming to resolve. However, by following the three methods we will discuss, you can easily fix the issue and ensure that your web application is secure and functional.

Fixed one: Installing a browser extension

You can successfully bypass the CORS origin error locally by installing an extension on your local browser called the Moesif CORS extension. Installing the Moesif CORS extension is the quickest solution. Clicking it in your browser after installation will enable the extension. Ensure that the label of the icon changes from "off" to "on.” Then refresh your application, and your API requests should now work🎉.

Yet, the plugin fix is misleading.

Why!!! you might ask, Well, the plugin undoubtedly resolves the problem. The only machine that this fix works on is your own. It's okay to have a plugin installed that can assist you in getting around the problem when working on local development.

Nevertheless, you cannot anticipate that your users will also install the plugin when you publish your application. It wouldn't be a smart business move…

There must be better options available. In order to get there, let's check out the next two fixes.

Fixed two: Send your request to a proxy

You cannot demand that your users install a plugin that applies a header in the front end in order to trick their browsers. Yet, you have control over the backend URL that receives API queries from web applications.

The cors-anywhere server acts as a proxy, inserting CORS headers into requests. A proxy serves as a mediator between a client and a server. The Cors-Anywhere proxy server functions here as a middleman between the frontend web app making the request and the server providing the data. Similar to the Allow-control-allow-origin plugin, it adds the more open Access-Control-Allow-Origin: * header to the response.

It works like this. Say your frontend is trying to make a GET request to:

https://joke-api-strict-cors.appspot.com/jokes/random

But there is no Access-Control-Allow-Origin value set for this API that would allow the web application domain to access it. So instead, send your GET request to:

https://cors-anywhere.herokuapp.com/<https://joke-api-strict-cors.appspot.com/jokes/random>

The proxy server receives the https://joke-api-strict-cors.appspot.com/jokes/random from the URL above. Then it sends a request to that server to obtain a response. Finally, the proxy updates the original response with the Access-Control-Allow-Origin: * header.

The fact that this solution functions in both development and production makes it fantastic. In conclusion, you are profiting from the fact that browser-to-server communication is the only scenario in which the same origin policy is used. Thus, it need not be imposed on server-to-server communication!

The Cors-Anywhere proxy's one drawback is that it can frequently take a while to get a response. Your applications might appear to be running a little slowly because of the high latency.

This brings us to a final, even better approach.

Fixed three: Build your own proxy

The solution I suggest in cases like these is to create your own proxy! Like the last technique, you make use of the fact that server-to-server communication does not enforce the same origin policy. You also take care of the latency issue. You can allocate as many resources as you need to your own servers and are not required to share the CORS-anywhere proxy with other users.

Here is some simple Node.js code that builds a proxy server for the same https://joke-api-strict-cors.appspot.com/ from above using the express web framework:

const express = require('express');
const request = require('request');

const app = express();
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

app.get('/jokes/random', (req, res) => {
  request(
    { url: '<https://joke-api-strict-cors.appspot.com/jokes/random>' },
    (error, response, body) => {
      if (error || response.statusCode !== 200) {
        return res.status(500).json({ type: 'error', message: err.message });
      }

      res.json(JSON.parse(body));
    }
  )
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`listening on ${PORT}`));

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 random joke from another server at its own jokes/random HTTP 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

In conclusion, the CORS Origin error in JavaScript can be a challenging issue to deal with, but understanding what CORS is and how it works can help you overcome it. By implementing the steps we've discussed in this post, you can fix the error and ensure that your website or application is secure and functional. Remember to always consider security when sharing resources between domains, as this is crucial to maintaining a safe and reliable web environment.

We hope this guide has been helpful in giving you an overview of CORS and how to fix the CORS Origin error in JavaScript. By following these best practices, you can enhance your development skills and create robust web applications that work seamlessly across different domains.

As you continue to work with JavaScript, keep in mind that there are many other potential issues you may encounter. However, with a solid understanding of web development principles and best practices, you can overcome any obstacle and create amazing web applications that m

Follow ME

Hey there! If you're interested in tech or programming articles, you should definitely give me a follow on any of the social media platforms below. I regularly post articles related to tech and programming, and I share valuable resources and insights. Plus, by following me, you'll be able to stay up to date on all the latest and greatest in the world of tech and programming. So, what do you say? Will you give me a follow?

Follow me on Dev.to, Twitter, LinkedIn, GitHub, Medium, Facebook, and my blog's Facebook page.