How to Fix CORS Error in Angular

Are you running into the No Access-Control-Allow-Origin error while working on your Angular project? You’re not alone. In this guide, you’ll learn clear, step-by-step methods to fix the CORS error in Angular and quickly get back to building your website.

CORS Error

What’s the Issue with CORS?

Cross-Origin Resource Sharing (CORS) in combination with Same Origin Policy (SOP) controls the resource sharing between origins. SOP is a security feature enforced by browsers to prevent your web app from making requests to a different origin without explicit permission, while CORS is a mechanism to allow certain origins to access the resource. When you see the error, it means the server you’re trying to reach isn’t allowing your Angular app to access its resources.

Origin structure

Fixing CORS When Fetching Your Own Backend

If you control the backend, fixing CORS is pretty straightforward.

1. Add the Appropriate CORS Headers

Make sure your backend returns the proper CORS headers. The key header is:

• Access-Control-Allow-Origin: Set this to the origin of your Angular app or use a wildcard (*) for development purposes (not recommended for production).

For example, in Node.js with Express, you can use middleware like:

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "http://your-angular-app.com");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

You can find more implementations for different backends in this resource: Enable CORS.

2. Enable OPTIONS Requests (Preflight Requests)

Browsers will send a preflight OPTIONS request when making cross-origin requests with:

• Custom request headers
• Methods other than GET/POST
• Specific content types

Adjust your server to respond to OPTIONS requests with the necessary headers, you can find things that trigger preflight requests in this StackOverflow Answer.

Fixing CORS When Fetching Others' Backends

Sometimes you’re working with third-party APIs or resources that don’t include CORS headers. Here’s how to work around it.

If You Have Your Own Backend (Recommended)

Instead of calling the external API directly from your Angular app:

• Set Up a Proxy Endpoint: In your backend, create an endpoint that makes the API call to the external service.
• Fetch from Your Frontend: Have your Angular app call your backend instead. This way, the external request is made server-to-server, bypassing browser CORS restrictions.

If You Don’t Have a Backend (Recommended)

Use a CORS Proxy. It works by sending the request to the external API on your behalf and then returning the response to your Angular app with the appropriate CORS headers. This way, you can bypass the browser’s CORS restrictions.

fetch("https://proxy.corsfix.com/?https://example.com/api")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

CORS Proxy usage example

Temporary Solutions for Development

If you’re in a pinch, here are a couple of quick fixes:

Browser CORS Unblockers

Browser extensions or settings that disable CORS can help you get around the issue temporarily. Note: This isn’t a solution for production, it’s just a quick way to test your app.

Browser extensions for unblocking CORS

Using a Local Proxy

You can configure your local development server (like Angular CLI’s proxy configuration) to reroute API requests:

• Create a proxy configuration file (e.g., proxy.conf.json) with your proxy settings.

{
  "/api": {
    "target": "<TARGET_URL>",
    "secure": false
  }
}

Angular local proxy configuration

• Adjust angular.json to use the proxy configuration.

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "proxyConfig": "src/proxy.conf.json"
          }
        }
      }
    }
  }
}

Angular local proxy configuration

• Run Angular development server with ng serve.

This approach is helpful when developing your Angular app, but not for production.

Conclusion

Now you know how to fix the CORS error in Angular. Whether you’re managing your own backend or working with third-party APIs, the key is understanding how CORS works and configuring your requests appropriately.

If you are looking for a CORS proxy, check out Corsfix. It is free to get started, and you only need to upgrade when you go to production.