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
To fix various PC problems, we recommend DriverFix:
This software will keep your drivers up and running, thus keeping you safe from common computer errors and hardware failure. Check all your drivers now in 3 easy steps:

  1. Download DriverFix (verified download file).
  2. Click Start Scan to find all problematic drivers.
  3. Click Update Drivers to get new versions and avoid system malfunctionings.
  • DriverFix has been downloaded by 0 readers this month.

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.

idee restoro Still having issues? Fix them with this tool:
  1. Download this PC Repair Tool rated Great on (download starts on this page).
  2. Click Start Scan to find Windows issues that could be causing PC problems.
  3. Click Repair All to fix issues with Patented Technologies (Exclusive Discount for our readers).

Restoro has been downloaded by 0 readers this month.

Frequently Asked Questions

  • One way to fix this issue is to use a proxy server. If you have issues connecting to a proxy server, please refer to this complete guide.

  • AngularJS is a JavaScript-based front-end web framework that is open-source. For the latest version of Javascript code, head over to this article.

  • Enable CORS  at the server level and add the domain that makes the request to the list of allowed domains.

This article covers:Topics: