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

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 level

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=“https://someorigin.domain.com”>
• <allowMethods>
• <add method=“GET” />
• <add method=“HEAD” />
• </allowMethods>
• </add>
• </cors>
• </system.webServer>
• </configuration>

Here,  cors will allow GET and HEAD requests from https://someorigin.domain.com/.

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.json, and 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.

[wl_navigator]