FIX: No access-control-allow-origin header error in Angular

by Teodor Nechita
Teodor Nechita
Teodor Nechita
Software Managing Editor
Eager to help those in need, Teodor writes articles daily on subjects regarding Windows, Xbox, and all things tech-related. When not working, you may usually find him either... read more
Affiliate Disclosure
  • Angular is one of the best platforms for developing web applications.
  • The article below will cover the No access-control-allow-origin header error.
  • For more issues regarding this subject, check out our Programming Tips Hub.
  • Our website also has a dedicated page for Developer Tools as well.
Fix Angular Issues
A message from our partner

To fix Windows PC system issues, you will need a dedicated tool

  • Download Fortect and install it on your PC
  • Start the tool's scanning process to look for corrupt files that are the source of your problem
  • Right-click on Start Repair so the tool can start the fixing algorithm
Download from Fortect has been downloaded by 0 readers this month, rated 4.4 on TrustPilot

One of the most common error messages Angular developers can encounter in their day to day work is: no access-control-allow-origin header present on the requested resource.

This is not a specific Angular problem, but a CORS (Cross-Origin Resource Sharing) header issue. It could mean that the back-end server is configured to work on a different port or domain.

How do I fix the No access-control error on Windows 10?

1. Make changes at the server levelweb-server-apache-iis

If you have access to the server, enable CROS requests by adding Access-Control-Allow-Origin: *   header. After that, configure cors entry, under system.webServer in web.config file, as in the example below.

  • <?xml version=”1.0″?>
  •  <configuration>
  • <system.webServer>
  • <cors enabled=“true”>
  • <add origin=“”>
  • <allowMethods>
  • <add method=“GET” />
  • <add method=“HEAD” />
  • </allowMethods>
  • </add>
  • </cors>
  • </system.webServer>
  • </configuration>

Here,  cors will allow GET and HEAD requests from

Also, if you’re using IIS (Internet Information Services) you would need to download IIS CORS Module.

Be careful to specify a domain or a list of domains instead of *. Otherwise, cross-origin requests to the server would be enabled from anywhere.

On Apache, in the configuration file, you need to add the line Header set Access-Control-Allow-Origin ‘*’.  Again, it is wise to replace the ‘*’, with a list of sources from where the requests would be made.

2. Run your own proxy server

  1. Firstly, we’ll create a proxy configuration file, in the root Angular folder, called src/proxy.conf.jsonand write the following code in it:
    • {"/api":
    • "target":"http://localhost:6000","secure": false }
    • }
  2. Secondly, in the angular.json file, add the proxyConfig option in the serve target:
    • "serve": {
    • "builder": "     ",
    • "options": { "proxyConfig": "src/proxy.conf.json" }
    • }
  3. Now run the current configuration with the ng serve command.

A proxy server would forward your requests to the remote server. Next, we are going to see how to configure a proxy server.

Requests for data in Angular are API calls to localhost, on port 4200, like this location:

  • http://localhost:4200/api/datareq.

However, in the example above, we assumed that the requested data is at this location:

  • http://localhost:6000/api/datareq.

Interested in good proxy solutions? Check out this list of dedicated tools

3. Disable the Same Origin Policy in your browser

Note: this particular method is not recommended since this can expose your browser (and your system) to major security risks.

If everything else is not working, you can resort to disabling the Same Origin Policy in the browser. However be careful, as this would expose your browser (and your system) to major security risks.

For Google Chrome, in Windows 10, open Command Prompt as an administrator and run the following command:

C:Program Files (x86)GoogleChromeApplicationchrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp..

In conclusion, no access-control-allow-origin header present on the requested resource error message is a server-side issue.

For Angular developers, modifying server configuration or using a proxy server should work just fine.

Tell us what you think of this guide in the comment section below.

This article covers:Topics: