No ‘Access-Control-Allow-Origin’ header is present on the requested resource Angular

No ‘Access-Control-Allow-Origin’ header is present on the requested resource Angular

If you are working with Angular and encounter the error message “No ‘Access-Control-Allow-Origin’ header is present on the requested resource,” you are not alone. This error typically occurs when you are trying to make an HTTP request from your Angular application to a different domain or port, and the server does not include the necessary CORS headers.

CORS (Cross-Origin Resource Sharing) is a security mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the resource originated. It is a browser security feature that prevents unauthorized access to resources.

To fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in Angular, you have a few options:

1. Server-side CORS Configuration

The first solution is to configure your server to include the necessary CORS headers. This solution requires access to the server-side code or configuration.

If you are using Node.js with Express, you can enable CORS by installing the ‘cors’ package and adding the following code to your server file:

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

const app = express();

app.use(cors());

// Rest of your server code

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

This code adds the ‘cors’ middleware to your Express application, allowing it to respond with the necessary CORS headers.

2. Proxy Configuration

If you do not have control over the server-side code or configuration, you can use a proxy configuration in your Angular application to bypass the CORS restriction.

In your Angular project, create a file called ‘proxy.conf.json’ in the root directory with the following content:

{
  "/api": {
    "target": "http://api.example.com",
    "secure": false,
    "changeOrigin": true
  }
}

This configuration tells Angular to proxy all requests starting with ‘/api’ to ‘http://api.example.com’. Make sure to replace ‘http://api.example.com’ with the actual API endpoint you want to access.

In your ‘package.json’ file, add the following line to the ‘scripts’ section:

"start": "ng serve --proxy-config proxy.conf.json"

Now, when you run the ‘npm start’ command to start your Angular development server, it will use the proxy configuration to forward requests and include the necessary CORS headers.

3. CORS Browser Extension

If you are only testing your Angular application locally and do not want to modify server-side code or use a proxy configuration, you can use a CORS browser extension to temporarily disable the CORS restriction in your browser.

There are several CORS browser extensions available for popular browsers like Chrome and Firefox. Install the extension for your browser and follow the instructions to enable it. Remember to disable the extension when you are done testing.

With these solutions, you should be able to resolve the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in Angular and make successful HTTP requests to different domains or ports.

Happy coding!