No access-control-allow-origin header is present on the requested resource. angular 7

by Teodor Nechita

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

Published on June 18, 2020

• 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.

XINSTALL BY CLICKING THE DOWNLOAD FILE

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=“//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 //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":"//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:

• //localhost:4200/api/datareq.

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

• //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.

1. Download this PC Repair Tool rated Great on TrustPilot.com (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

• How do I fix access control allow Origin error?

  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.

• What is Angular JS?

  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.

• How do you solve no access control error message in Angular?

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

Newsletter

How do you fix no Access

How do I fix CORS policy no Access

How do I add Access

Why CORS error occurs in angular?